html – 收缩包装/缩小以适应一个div以在css中回填浮动的div

http://jsfiddle.net/zEcn3/12/

我试图获得一个div内容，调整大小适合一行的div数量。因此，当窗口大于所有项目div的组合时，该示例工作正常，因此它们全部在一行中，但是当窗口调整大小时，其中一个项目将回填到下一行，内容div的宽度为100 ％而不是收缩包装。

我想要这样做的原因是，我可以将内容与内容上的菜单栏对齐，缩小到组合回流内容的大小。

HTML：

<div class="wrapper">
    <div class="content">
        <div class="item">Hello.</div>
        <div class="item">Hello.</div>
        <div class="item">Hello.</div>
        <div class="item">Hello.</div>
        <div class="item">Hello.</div>
    </div>
</div>

CSS：

.item {
    float: left;
    width: 70px;
    border: 1px solid black;
}

.content {
    display: inline-block;
    border: 1px solid black;

}
.content:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

解决方法

一个朋友为我找出来，答案是使用媒体查询。

@media (max-width: 1080px) {
    #main {
        max-width: 640px;
    }
}

所以我设置每个项目div的宽度的间隔，所以当观察窗口小于一定数量时，它将容器的宽度设置为下一个级别。

原文地址：https://www.jb51.cc/html/232746.html