5

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

4

3 回答 3

1

用3列结构是没有办法达到这个效果的。如果块的高度都相同，那么您可以浮动：离开所有没有列的块，然后它们将按顺序包装。由于它们的大小不同，因此您必须使用 JavaScript，例如 masonry：

http://masonry.desandro.com/

于 2013-05-12T13:01:13.210 回答
0

实现这一点将非常困难，您可能想使用带有浮动的单个列表：左；或显示：内联块；

或者

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

示例

@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;}
}
于 2013-05-13T10:48:05.630 回答
0

另一种方法是使用column-count: 3;and column-gap: 10px;。但是在宽屏上顺序是不同的。

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

于 2018-04-05T08:33:43.163 回答