javascript - 使用 css 自动排列元素

Question

我有一个应用程序有点卡住了。我创建了一个小部件，需要以需要自动放置的方式放置。例如:

我在页面上有这样的东西，现在最初所有这些都排列得很完美(水平对齐)，但是一旦其中一个组件的大小发生变化例如:

就变成这样了。我想要的是它自动调整自身以消耗空白空间。

我尝试使用 css 使其 float :left 和 display: block ，通过它我可以水平对齐每个组件，但我仍然无法利用页面上的空间。

感谢任何帮助

Answer 1

纯 CSS 解决方案:

假定您希望每行有 3 个“连接”项，这应该是您的 CSS:

#wrapper{
    -moz-column-count: 3;
    -moz-column-gap: 1em;
    -webkit-column-count: 3;
    -webkit-column-gap: 1em;
    column-count: 3;
    column-gap: 1em;
}
.itm{
    display:inline-block;
    width:100%;
    border-top:1px solid red;
    border-bottom:1px solid red;
    margin-bottom:1em;
}
.itm:nth-child(3n+1){
    clear:left;
}

这是你的 HTML

<div id="wrapper">
    <div class="itm">
        <h1>connections a</h1>
        <div class="info">
            <span class="label">server</span>
            <span class="value">100</span>
        </div>
    </div>
    [... copy paste as many "itm"s as you need]
</div>

在此处查看带有“单击添加更多元素”的 fiddle 以查看结果 -- 旧 -- http://jsfiddle.net/5FsLm/ -- 旧 --

更新 fiddle http://jsfiddle.net/c2nkn/