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

Question

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

0

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

<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-код

drv 25 нояб. 2013, в 10:22

Источник

0

Добавьте свой CSS, чтобы помочь вам. или установите скрипку или jsbin.
Viken Patel 25 нояб. 2013, в 08:52
0

Попробуйте прочитать начальную загрузку CSS. Они содержат некоторые классы, такие как col-xs, col-sm, col-md и т. Д. Getbootstrap.com
Govan 25 нояб. 2013, в 08:53
0

@Igle Я знаю об этом. Проблема в том, что я не уверен, как начать.
drv 25 нояб. 2013, в 09:41
0

Пожалуйста, отредактируйте свой вопрос, я случайно проголосовал за него, хотя я и хотел проголосовать.
peterh 25 нояб. 2013, в 09:54

Показать ещё 2 комментария

Теги:

javascript

jquery

html

css

html5

2 ответа

Ещё вопросы

Добавьте свой CSS, чтобы помочь вам. или установите скрипку или jsbin.
Попробуйте прочитать начальную загрузку CSS. Они содержат некоторые классы, такие как col-xs, col-sm, col-md и т. Д. Getbootstrap.com
@Igle Я знаю об этом. Проблема в том, что я не уверен, как начать.
Пожалуйста, отредактируйте свой вопрос, я случайно проголосовал за него, хотя я и хотел проголосовать.

peterh · Answer 1 · 2013-11-25T07-58-00.000Z

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

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

<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>

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

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

Это не так просто. AI сказал - элементы должны быть абсолютно позиционированы, потому что вся конструкция сиденья нерегулярна.
Я отредактировал свой вопрос и предоставил дополнительную информацию.
Хорошо, но в настоящее время я думаю, что мое текущее решение работает. Это так?

Miquel Las Heras · Answer 2 · 2013-11-25T07-50-00.000Z

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

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