css - Bootstrap 列与列中的前一项对齐

Question

我已经尝试解决这个问题一段时间了，所以我需要你的帮助 Stackoverflow..我有一个包含 2 列的模板(带有 Bootstrap 网格系统)，如下所示: 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 列。简单干净:

检查这个 fiddle > http://jsfiddle.net/luckmattos/aExxp/1/ 或 www.w3schools.com "css3_multiple_columns"或...

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;
}