html - 具有最大宽度的容器在调整大小时不会包装内联 block 子级

Question

我有这个代码:

@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

当媒体查询被激活时，容器不会环绕它的元素。漂浮的 child 也会发生同样的事情(我想这很正常)。

Answer 1

Demo

一个选项是添加一个“内部”包装器；只是 wrapper 中的 wrapper 。你可以让它 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%;
}