引导列与列中的前一项对齐

Question

我已经尝试解决这个问题一段时间了，所以我需要你的帮助 Stackoverflow.. 我有一个包含 2 列的模板（带有引导网格系统），如下所示： http://snag.gy/Vh9Do.jpg

我想要这样的东西： http://snag.gy/cYIlo.jpg

我的 html 目前看起来是这样的：

<div class="container-fluid">
    <div class="row">
        <div class="post-container column-md-6" id="post-1">
            content...
        </div>
        <div class="post-container column-md-6" id="post-2">
            content...
        </div>
    </div>
    <div class="row">
        <div class="post-container column-md-6" id="post-3">
            content...
        </div>
        <div class="post-container column-md-6" id="post-14">
            content...
        </div>
    </div>
   [...]
</div>

你知道我该怎么做吗？ （不破坏页面中的发布顺序，因为它们只是纵向的一列）

Answer 1

你不能只使用 html 来做到这一点，你需要添加一些 JS 并且为此有很多好的插件（一个例子：http://www.akshitsethi.me/pinterest-like-grid-layout-using-jquery/）

另一种选择 （如果您不需要 IE 支持 - 10% 的用户）：

CSS3 列。简单干净：

看看这个小提琴 > http://jsfiddle.net/luckmattos/aExxp/1/ or www.w3schools.com "css3_multiple_columns" or...

HTML

<div>
<div class="item1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<div class="item2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<div class="item3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<div class="item1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<div class="item3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<div class="item2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<div class="item1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<div class="item3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<div class="item2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
</div>

CSS

div {
    width:500px;
    padding:10px;
    background:#ccc;

    /* Number of COLS */
    -moz-column-count:2; /* Firefox */
    -webkit-column-count:2; /* Safari and Chrome */
    column-count:2;

    /* Distance between COLS */
    -moz-column-gap:10px; /* Firefox */
    -webkit-column-gap:10px; /* Safari and Chrome */
    column-gap:10px;
}

.item1 {
    background:#f00;
    height:100px;
    padding: 3px;
    margin:10px;
    display:inline-block;
}
.item2 {
    background:#0f0;
    height:150px;
    padding: 3px;
    margin:10px;
    display:inline-block;
}
.item3 {
    background:#00f;
    height:100px;
    padding: 3px;
    margin:10px;
    display:inline-block;
}

Answer 2

如果没有 jsfiddle 可以玩，猜测可能会尝试删除 .row 元素，所以是这样的：

<div class="container-fluid">
    <div class="post-container column-md-6" id="post-1">
        content...
    </div>
    <div class="post-container column-md-6" id="post-2">
        content...
    </div>
    <div class="post-container column-md-6" id="post-3">
        content...
    </div>
    <div class="post-container column-md-6" id="post-14">
        content...
    </div>
    [...]
</div>

如果这不起作用（我的建议），那么我建议使用 Masonry：http://masonry.desandro.com/options.html

这里有一堆使用 Masonary 的例子：http://www.webappers.com/2011/12/29/15-great-examples-of-websites-using-jquery-masonry/