使用css自动排列元素

Question

我有一个应用程序，我有点卡住了。 我创建了一个小部件，需要放置它需要自动放置自己。 例如：

我在页面上有这样的东西，现在最初所有这些都完美排列（水平对齐），但只要其中一个组件的大小发生变化 例如：

就像这样。我想要的是自动调整自己以消耗空白空间。

我使用css来使它浮动：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>

在这里看到一个小提琴“点击添加更多项目”以查看结果 - 旧 - http://jsfiddle.net/5FsLm/ - 旧 -

更新小提琴http://jsfiddle.net/c2nkn/

Answer 2

这绝对是jQuery Masonry的完美案例。该插件可以自动排列列，以便它们可以组合在一起。像这样：

<强> HTML

<div id="wrapper">
    <div id="list">
        <div class="item"> ... </div>
        <div class="item"> ... </div>
        <div class="item"> ... </div>
        <!-- ... -->
    </div>
</div>

<强> jquery的

$(window).load(function(){
    $('#list').masonry({
        itemSelector: '.item'
    });
});

P.S。：目前，由于某种原因，官方网站出现故障，我将在这里放一个临时链接。

---

更新：Temporary link for jQuery Masonry（实际上来自cutestpaw.com，它有本地副本，所以如果你想测试它，你应该复制文件而不是链接到它）

Answer 3

如果我正确理解你，看起来你真正想要的是这些小部件的三列结构。在这种情况下，它看起来像这样。

HTML

<div class='three-column'>
    <div class="widget">...</div>
    <div class="widget">...</div>
    <div class="widget">...</div>
</div>
<div class='three-column'>
...
</div>
<div class='three-column'>
...
</div>

CSS

.three-column {
    width: 30%;
    padding-right: 3%;
    float: left;
}

更新：http://jsfiddle.net/cBgj4

Answer 4

如果您不想要太多动画并且需要一个非常容易理解且满足您目的的脚本，请尝试jquery.popbild.js。

您可以从以下网址下载该项目：http://funscripts.popbild.com/jquery_popbild/

它主要用于为三列（使用三个分区）的pinterest样式排列元素