1

我在一行中有多个带有col-sm-6的 div 。该设置的第一个、第三个和连续 div 的高度相当小，而第二个的高度要大得多。

我期待 div 重新流动，第一个在左边，第二个在右边，第三个在左边，在第一个下面。它会这样做，但第三个 div 的顶部与第二个 div 的底部一致。我期待它会上升到第一个的底部。

<div class="row row-fluid">
    <div class="col-sm-6" style="min-height: 30px">1</div>
    <div class="col-sm-6" style="min-height: 90px">2</div>
    <div class="col-sm-6" style="min-height: 20px">3</div>
    <div class="col-sm-6" style="min-height: 40px">4</div>
</div>

我构建了一个 jsFiddle 来尝试显示问题：http: //jsfiddle.net/G7atf/1/

有没有办法轻松解决这个问题而不必编写我自己的 JS？

4

1 回答 1

0

如果要在左列中显示“某些元素”，在右列中显示“其他元素”，只需使用两列：

<div class="row">
    <div class="col-sm-6">
        <div class="row">
            <div class="col-sm-12">
            </div>
            <!-- more items here -->
        </div>
    </div>
    <div class="col-sm-6">
        <div class="row">
        </div>
            <div class="col-sm-12">
            </div>
            <!-- more items here -->
    </div>
</div>

如果您正在寻找自动排列元素（AKA Pinterest式布局），请考虑使用Masonry或Isotope等第三方解决方案，否则您必须编写自己的插件。

于 2013-10-02T08:26:19.043 回答