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

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

Answer 1

Demo

一个选项是添加一个“内部”包装器;只是你的包装器中的包装器。你可以在父包装上设置display inline-block并设置text-align center。最后，从包装中删除灰色背景并应用于内包装。

只有一个缺点是，当你使窗口非常小时，.col divs不会排在左边。不确定这是否是你的问题

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

具有最大宽度的容器在调整大小时不会包装内联块子项

1 个答案: