三列布局与不同高度的块

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/

Answer 2

要实现这一目标会非常困难，你可能想要使用float：left;或显示：inline-block;

或

你可以在css中有2个带@media的列表，所以取决于你可以显示或隐藏所选div的屏幕大小

css示例

@media screen and (min-width: 768px) and (max-width: 1024px) {
.displayFullScreen {display: block;}
.displayMobileScreen {display: none;}
}


@media screen and (max-width: 767px) {
.displayFullScreen {display: none;}
.displayMobileScreen {display: block;}
}

Answer 3

其他方式是使用column-count: 3;和column-gap: 10px;。但是在宽屏幕上订单不同。

小提琴：https://jsfiddle.net/ksvx2txb/102/