Поведение адаптивного дизайна
Вот песочница https://jsfiddle.net/o82kLqdn/1/ Там есть боди с размером 600рх, в нём контейнер 521рх в котором три блока по 164рх с отступами по 10рх. Я всё это сделал резиновым, т.е. делил внутренние блоки на внешние получал размер. Теперь при получении нужных размеров всё работает и размер остался таким каким должен быть. Но когда я сужáю размер окна последний блок вылетает... из-за чего такое поведение ведь всё держалось на месте.
body{
max-width:600px;
border:1px black solid;
margin:0 auto;
}
#wraped{
border:1px black solid;
width:86.833%;
margin:0 auto;
}
#block{
width:31.477%;
height:100px;
background:red;
margin-right:1.919%;
display:inline-block;
}
#block:last-of-type{
margin:0;
} <div id="wraped">
<div id="block"></div>
<div id="block"></div>
<div id="block"></div>
</div>Размер элемента body указан как абсолютный/статичный. Вообще-то к этому элементу не применяют размеры. Если это вам так уж необходимо, то примените относительный размер в %. Размер селектора стилей wraped (родитель блоков) = 86.833%. Если эту цифру разделить на три (количество блоков в контейнере), то получиться примерно 28%, но не 31.477% - как у вас. И ву-а-ля:
body{
border:1px black solid;
margin:0 auto;
}
#wraped{
border:1px black solid;
width:86.833%;
margin:0 auto;
}
#block{
width:28%;
height:100px;
background:red;
margin-right:1.919%;
display:inline-block;
}
#block:last-of-type{
margin:0;
}<div id="wraped">
<div id="block"></div>
<div id="block"></div>
<div id="block"></div>
</div>
-
12:23
-
20:41
-
06:31
-
21:28
-
22:18
-
08:00
-
13:46
-
10:14
-
18:32
Сборка персонального компьютера от Artline: умный выбор для современных пользователей
- Почему SERVER_ADDR имеет не тот IP 49912 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 31901 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 25875 visits
- Как через css изменить цвет png изображения? 11721 visits
- Blob video url download 11267 visits
- Php curl запрос через прокси с авторизацией 10665 visits
- Работа с captcha vk api 9470 visits
© "hostciti.net" 20.12.2025 | 22:28