调整大小时，具有最大宽度的容器不会包裹内联块子项答案

【问题标题】：Container with max-width won't wrap inline-block children when resized调整大小时，具有最大宽度的容器不会包裹内联块子项
【发布时间】：2015-06-30 14:32:12
【问题描述】：

我有这个代码：

@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%;
}

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

DEMO

当媒体查询被激活时，容器不会环绕它的元素。漂浮的孩子也会发生同样的事情（我猜这很正常）。

【问题讨论】：

这里有一个简单的例子来更好地表达我的问题：i.stack.imgur.com/Wggtj.png
你也可以尝试使用浮点数。

标签： html css containers clearfix

【解决方案1】：

Demo

一种选择是添加一个“内部”包装器；只是包装器中的包装器。您可以将其设为display inline-block 并在父包装器上设置text-align center。最后，从 wrapper 中移除灰色背景并应用到内部 wrapper。

只有一个缺点是，当您将窗口设置得很小时，.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%;
}

【讨论】：