Поведение адаптивного дизайна

355

24 ноября 2016, 10:09

Вот песочница 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>

Answer 1

Размер элемента 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>

Создание интернет-магазина интимных товаров в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Совмещение сетки макета блоком для фона

Не получается совместить резиновый макет с блоком, который будет выступать в роли статичного фона (чистый CSS). То макет сваливается под body, то страница...

308

CSS

Графическое оформление списка

Подскажите по списку с оформлением. Что изменить в коде, чтобы если было больше одной строчки в абзаце не сжимался background для номера? Возможно...

393

CSS

Float li - одинаковый вертикальный отступ вместо наибольшего

Есть ul с такими стилями:.

285

CSS

как добавить 0 код дням в календаре?

не работают 0 в от 1-9 в календаре тоесть все даты прдсвечиваются а вот все что от 1 до 9 нет я так понимаю нужен ноль но как его добавить в код...

300