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

Posted 2023-03-04

【中文标题】调整大小时，具有最大宽度的容器不会包裹内联块子项

【英文标题】：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" >
  </section>
  <section class="col">
    <img src="http://placehold.it/200x120" >
  </section>
</section>

DEMO

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

【问题讨论】：

这里有一个简单的例子来更好地表达我的问题：i.stack.imgur.com/Wggtj.png

你也可以尝试使用浮点数。

【参考方案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" >
        </section>
        <section class="col">
            <img src="http://placehold.it/200x120" >
        </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%;