Учитывая это HTML:Контейнер с максимальной шириной не обертывают встроенный блок детей при изменении размеров
<section class="wrapper clearfix">
<section class="col">
<img src="http://placehold.it/200x120" alt="">
</section>
<section class="col">
<img src="http://placehold.it/200x120" alt="">
</section>
</section>
... и этого CSS
@media screen and (max-width: 600px) {
.col {
max-width: 150px;
}
}
.wrapper {
max-width: 500px;
margin: 0 auto;
background: grey;
font-size: 0;
}
.col {
width: 200px;
margin-right: 100px;
display: inline-block;
}
.col:last-child {
margin-right: 0px;
}
img {
max-width: 100%;
}
DEMO - http://jsfiddle.net/j77cd856/4/
контейнер не будет обертывать его элементы, когда носители запрос активируется. То же самое происходит с плавающими детьми (что нормально, я думаю?)
Мне удалось исправить это с помощью следующего clearfix, но я до сих пор не знаю, почему это происходит или есть лучший способ его исправить ,
.clearfix {
content: "";
display: table;
clear: both;
}
ДЕМО - http://jsfiddle.net/j77cd856/6/
Вот простой пример, чтобы лучше передать мою проблему: http://i.stack.imgur.com/Wggtj .png –
вы также можете попробовать использовать поплавки. – ajmajmajma