三栏布局与不同高度的块 [英] Three-column layout with block of different heights

问题描述

我有基于Twitter Bootstrap的简单的3列布局。唯一的问题是，每个柱从不同高度的块组装。

I have simple 3-column layout based on Twitter Bootstrap. The only problem is, that each column is assembled from block with different heights.

<div class="container">
    <div id="blocks" class="row">
        <div class="span4">
            <div class="block" id="block1">
            <div class="block" id="block4">
            <div class="block" id="block7">
        </div>
        <div class="span4">
            <div class="block" id="block2">
            <div class="block" id="block5">
            <div class="block" id="block8">
        </div>            
        <div class="span4">
            <div class="block" id="block3">
            <div class="block" id="block5">
            <div class="block" id="block9">
        </div>
    </div>
</div>

。

它工作得很好，除了小显示器。

It works quite fine, except for small displays. Then the order of blocks is not sorted.

有没有办法实现没有任何JavaScript的排序块？

Is there some way to achieve sorted blocks without any JavaScript?

推荐答案

没有办法用3列结构实现这个效果。如果块都是相同的高度，那么你可以float：留下所有的块没有列，然后他们将按顺序包装。由于它们的大小不同，因此您必须使用像masonry这样的JavaScript：

There is no way to achieve this effect with the 3 column structure. If the blocks were all the same height then you could float:left all the blocks without the columns then they would wrap in order. Since they are not the same size you would have to use a JavaScript such as masonry:

http://masonry.desandro.com/

这篇关于三栏布局与不同高度的块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！