具有不同高度块的三列布局

我有基于 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 的情况下实现排序块？

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

http://masonry.desandro.com/ http://masonry.desandro.com/