收缩/自适应一个div以使其适应在css中重新排列的浮动div。

Question

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

我想让一个 div 根据每行可以放下的 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;
}

- Joe

---

我闻到了一个带有2行/1列或display: table(-cell)的<table>。 - biziclop

Answer 1

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

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

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

- Joe

---

似乎为每个元素定义这个有点繁琐。难道没有更简单的解决方案吗？ - CheeseSucker

我为一个类似的问题实现了这个：https://dev59.com/vl_Va4cB1Zd3GeqPVJ0M#8987026 - thirtydot

Answer 2

我不确定您是想在容器上删除100%的宽度，还是只是让容器随着屏幕大小而缩小。

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

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

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

- Rob Myrick

Answer 3

我在这里找到了答案： http://haslayout.net/css-tuts/CSS-Shrink-Wrap 基本上，它相当于在你想要缩小以适应其内容的块元素上使用display: inline-block;。

- JMB

Answer 4

尝试在容器

上使用margin:auto，并设置固定位置。

- Song

---

固定定位完全没有意义，也不是预期的效果。此外，“margin：auto”也没有帮助。 - jnns