Html 调整大小时，具有最大宽度的容器不会换行块子对象

我有以下代码：

@媒体屏幕和最大宽度：600px{ 上校{ 最大宽度：150px； } } .包装纸{ 最大宽度：500px； 保证金：0自动； 背景：灰色； 字号：0； } 上校{ 宽度：200px； 右边距：100px； 显示：内联块； } 上校：最后一个孩子{ 右边距：0px； } img{ 最大宽度：100%； } 一个选择是添加一个内部包装器；你的包装里只有一个包装。可以使其显示内联块，并在父包装上设置文本对齐中心。最后，从包装中移除灰色背景并应用于内部包装

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

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