使用引导程序显示非等高度元素

Question

我想制作一个页面，其帖子的高度不相同，但宽度相同，就像一行中的两个帖子而不使用行我确实给每个div一个col-md-6类给了我两个div一行，但元素之间存在间隙，因为它们具有不同的高度。 像这样：

如果单击显示评论按钮，则差距会变大：

这是一个有效的plunker 我试图将奇数元素拉到一边，将偶数元素拉到另一边，我想也许当元素向左浮动时它们会保持不变，但这不正确。 首先它看起来像是有效的：

但是再一次点击show comments按钮后，间隙重新出现，如果我用填充玩一点，元素将不对齐：

这是plunker中的一个工作示例 在所有这些例子中，如果元素足够长，它会将元素推到另一侧，这是我不想要的另一种行为。
所以问题是如何以一种没有间隙的方式显示非相等高度元素，并且当一个元素太长时（或点击显示评论按钮）它不会推动下一个元素它到另一边？
注意：我正在寻找CSS解决方案。

更新

由于@gorostas和@dsuess回答使用两个容器来分隔元素是原始设计，它作为一个视觉组织工作但是当它订购帖子时将是一个问题，因为循环不会在两个单独的容器中运行，并且每个循环中都会抛出一个元素，所以为了使这样的解决方案能够工作，我需要编写一个函数来拆分帖子并按照帖子编号1在左边的方式组织它们， 2在右边，3在左边，依此类推，尽管这样做是不可取的，所以回到我原来的问题我正在寻找一个CSS解决方案我已经有2个其他JavaScript解决方案我不想使用我宁愿找到一个简单易用的解决方案，这样可以减少编写的HTML和JavaScript代码的数量。

Answer 1

如何在每个包含框中使用2列：

＆＃13;

＆＃13;

$('div').on('click', function () {
    $(this).toggleClass('expanded')
});

＆＃13;

.column{    
    width: 48%;
    float: left;
    margin: 0 1%;
}
.box {
    margin: 5px 1%;
    width: 100%;
    height: 40px;
    border: 1px solid black;
    background: #c3c3c3;
}
.expanded {
    height: 120px;
    background: #999;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>click the boxes</h2>
<div class="column">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
</div>
<div class="column">
    <div class="box">6</div>
    <div class="box">7</div>
    <div class="box">8</div>
    <div class="box">9</div>
    <div class="box">10</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您对使用砌体有什么看法？

这是工作小提琴 http://jsfiddle.net/52VtD/9313/

$(document).ready(function () {
    var $container = $('.masonry');

    $container.function () {
        $container.masonry({
            itemSelector: '.post-box',
            columnWidth: '.post-box',
            transitionDuration: 0
        });
    });
});

更新最终

<div class="row">
        <div class="col-xs-6 col-md-6 col-sm-6">
            1
        </div>
        <div class="col-xs-6 col-md-6 col-sm-6">
            2
        </div>
    </div>
    <div class="row">
        <div class="col-xs-6 col-md-6 col-sm-6">
           3
        </div>
        <div class="col-xs-6 col-md-6 col-sm-6">
            4
        </div>
    </div>
    <div class="row">
        <div class="col-xs-6 col-md-6 col-sm-6">
             5
        </div>
        <div class="col-xs-6 col-md-6 col-sm-6">
            6
     </div>
</div>

工作小提琴 http://jsfiddle.net/52VtD/9325/