Css 如何在两列中浮动文章？

我有这个问题。我正在建立一个社交网站，我必须在两个栏目中创建帖子。父容器是一个节，而元素“post”是样式为float:left的文章。我该如何让自己滑到那些较短的树下创造的空白的柱子上呢

---

css中还没有好的解决方案。这通常称为砌石或圆柱状布局。 使用jquery

试试看。。。

---

或者谷歌“砖石布局插件”

这个基本的JavaScript函数可能会有所帮助。它使用jQuery：

function structurePosts(holder){
$(holder).find('.post-item').each(function(){
        $(this).appendTo('.col-append');
        var nextColumn = $('.col-append').next('div');
        $('.col-append').removeClass('col-append');
        if(nextColumn.size()){
            nextColumn.addClass('col-append');
        } else {
            $('.post-col').first().addClass('col-append');
        }
    });
}

你可以这样称呼它：

structurePosts('#container-with-posts');

它基本上只是用一类

post-item

遍历每个包含的元素，并将它们放入具有类

post-column

它需要一个HTML结构，如下所示：

<div class="posts-columns">
    <div class="post-col col-append"></div>
    <div class="post-col"></div>
    <div class="post-col"></div>
</div>
<div id="container-with-posts">
    <div class="post-item> <!-- Post content here --> </div>
    <div class="post-item> <!-- Post content here --> </div>
</div>

你能发布与这个问题相关的html+css吗？我以前也遇到过这个问题。最后，我使用JavaScript将这些项从它们所在的元素中提取出来，并以增量方式将它们附加到3列中。但这并不是最优雅的解决方案，我不想复制我的源代码，因为有一篇简单的文章放在一个小节中。也许最好的解决方案是@superUntitled发布的砌体