2015-04-22 2 views
0

Учитывая это 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/

+0

Вот простой пример, чтобы лучше передать мою проблему: http://i.stack.imgur.com/Wggtj .png –

+0

вы также можете попробовать использовать поплавки. – ajmajmajma

ответ

0

Demo

один вариант заключается в добавлении "внутренний" обертки; просто обертка в вашей обертке. вы можете сделать это display inline-block и установить text-align center на родительскую оболочку. Наконец, удалите серый фон из обертки и примените к внутренней оболочке.

только один недостаток заключается в том, что, когда вы делаете окно действительно маленьким, div. Div не выстроены слева. не уверен, что это проблема для вас

HTML

<section class="wrapper clearfix"> 
    <div class='inner-wrap'> 
     <section class="col"> 
      <img src="http://placehold.it/200x120" alt=""> 
     </section> 
     <section class="col"> 
      <img src="http://placehold.it/200x120" alt=""> 
     </section> 
      </div> 
    </section> 

CSS

@media screen and (max-width: 600px) { 
    .col { 
     max-width: 150px; 
    } 
} 

.inner-wrap { 
    display: inline-block; 
    background: grey; 
} 
.wrapper { 
    text-align: center; 
    max-width: 500px; 
    margin: 0 auto; 
    font-size: 0; 
} 

.col { 
    width: 200px; 
    margin-right: 100px; 
    display: inline-block; 
} 

.col:last-child { 
    margin-right: 0px; 
} 

img { 
    max-width: 100%; 
} 

 Смежные вопросы

  • Нет связанных вопросов^_^