Question

我试图解决这个问题一段时间所以我需要你的帮助Stackoverflow .. 我有一个带有2列的模板（带引导网格系统），如下所示： http://snag.gy/Vh9Do.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 Collumn。简单干净：

看看这个小提琴＆gt; 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;
}

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>

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

以下是一些使用Masonary的示例：http://www.webappers.com/2011/12/29/15-great-examples-of-websites-using-jquery-masonry/

Bootstrap列与列中的上一项对齐

2 个答案: