Question

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

我正在尝试将div content调整为适合一行的div个数。因此，当窗口大于所有item div组合时，该示例工作正常，因此它们都在一行中，但是当窗口调整为较小时，item之一s被重排到下一行，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

一位朋友为我找到了答案，答案是使用媒体查询。

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

所以我设置每个项目div的宽度间隔，所以当查看窗口小于某个数字时，它会将容器的宽度设置为下一级别。

Answer 2

我不太确定您是否尝试移除容器上的100％宽度，或者只是让容器与内容一起缩小，具体取决于屏幕的大小。

我认为问题在于，当我缩小屏幕时，右侧的最后一个“Hello”会被推到下一行。

所以我所做的是将100％宽度设置为包装器。然后我从项目中删除了固定宽度并将其更改为％widths。在这种情况下，我拿了盒子的数量并将它们分成100％，每个20％（但是1px边框我减少到19％）。另外，我向display:block; margin-left:auto; margin-right:auto;添加了id="content"。

以下是JS Fiddle的链接：http://jsfiddle.net/rm2773/Lq7H7/

Answer 3

我在这里找到答案： http://haslayout.net/css-tuts/CSS-Shrink-Wrap

它基本上等于在要缩小的块元素上使用display: inline-block;以适合其内容。

Answer 4

尝试将margin:auto用于container <div>并设置fixed position。

收缩/收缩 - 适合div在css中回流浮动的div

HTML：

CSS：

4 个答案: