三列布局与不同高度的块

Question

我有基于Twitter Bootstrap的简单3列布局.唯一的问题是,每个列都是从具有不同高度的块组装而成.

<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>

.

除小型显示器外,它工作得很好.然后不对块的顺序进行排序.

有没有办法在没有任何JavaScript的情况下实现排序块？

Answer 1

3柱结构是无法达到这种效果的。如果块的高度相同，那么您可以浮动：将所有块保留为没有列，然后它们将按顺序换行。由于它们的大小不同，您必须使用 JavaScript，例如砌体：

http://masonry.desandro.com/