html - 收缩包装/收缩以适应 div 以在 css 中回流 float div

Question

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

我正在尝试获取一个 div content 来调整大小以适应一行中的 div 的数量。因此，当窗口大于所有 item div 的组合时，该示例工作正常，因此它们全部排成一排，但是当窗口调整得更小时，其中一个item 重排到下一行，content 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;
}

Answer 1

一个 friend 帮我想出来了，答案是使用媒体查询。

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

所以我设置了每个item div的宽度的间隔，所以当查看窗口小于一定数量时，它把容器的宽度设置到下一级。