Изменение размера элементов и размера окна браузера

Question

У меня есть контейнер с несколькими кнопками, которые абсолютно расположены. Я бы хотел, чтобы эти кнопки изменялись в соответствии с шириной окна браузера. Таким образом, размер кнопки и ее позиция должны измениться. Он мало похож на контрольную панель, но есть отверстия.

<div id="seats"> 
    <div class="row"> 
    <input type="button" class="seat"/> 
    <input type="button" class="seat"/> 
    <input type="button" class="seat"/> 
    <input type="button" class="seat"/> 
    </div> 
    <div class="row"> 
    <input type="button" class="seat"/> 
    <input type="button" class="seat"/> 
    </div> 
</div> 

Боюсь, что простого css недостаточно. Элементы сиденья генерируются серверным кодом и каждый из них абсолютно позиционирован (по инлайн CSS) Таким образом, кажется, что-то вроде JS кода необходимо

Answer 1

Вы можете сделать это с помощью CSS медиазапросы http://css-tricks.com/css-media-queries/

Or с событием jquery window.resize() http://api.jquery.com/resize/

Answer 2

Вы можете дать простые проценты в абсолютных координатах. Но вам нужно отдавать разные должности различным классам «место», что крайне непрактично.

Я думаю, что в вашем случае лучшим решением было некоторые, как:

<style> 
.seats { 
    display: block; 
    position: relative; 
} 

.seat { 
    display: inline-block; 
    position: static; 
    width: 25%; 
    height: 10%; 
} 
</style> 
<div id="seats"> 
    <input type="button" class="seat"/> 
    <input type="button" class="seat"/> 
    <input type="button" class="seat"/> 
    <input type="button" class="seat"/> 
    <input type="button" class="seat"/> 
    <input type="button" class="seat"/> 
</div> 

Я бы еще предложить немного узнать о дизайне жидкости.

Вот решение, если вам нужно всегда и только абсолютные метки, вероятно, из-за какой-то очень эзотерической причины:

<style> 
#seat1 { 
    display: block; 
    position: absolute; 
    left: 13%; 
    right: 19%; 
    top: 17%; 
    bottom: 29%; 
} 

#seat2 { 
    display: block; 
    position: absolute; 
    left: 18%; 
    right: 23%; 
    top: 45%; 
    bottom: 67; 
} 

// And any other seat-declaration, with its absolute coordinates! 

</style> 
<div id="seats"> 
    <input type="button" id="seat1"/> 
    <input type="button" id="seat2"/> 
    <input type="button" id="seat3"/> 
    <input type="button" id="seat4"/> 
    <input type="button" id="seat5"/> 
    <input type="button" id="seat6"/> 
</div> 

Так будет делать именно то, что вы написали здесь.

Но предупреждаю: я уверен, что вы делаете что-то страшное.