集裝箱，最大寬度調整

Question

時考慮到這種HTML不會換inline-block的孩子：

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

}

DEMO - http://jsfiddle.net/j77cd856/6/

Answer 1

Demo

一種選擇是增加一個 「內」 包裝;只是你的包裝中的包裝。您可以在父包裝器上製作display inline-block並設置text-align center。最後，從包裝中刪除灰色背景並應用於內部包裝。

只有一個缺點是，當你使窗口非常小時，.col 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%; 
}