杂志式主题的CSS div位置

Question

我使用twitter bootstrap 3作为CSS框架。基本上我有2行，有3列文章。

选项1

使用下面的代码（骨架）的第一种方法，我能够完全遵循样本设计（列中的div将位于下方）但是如果我使用这种方法，很难与后端集成。

<div class="row">
    <div class="col-sm-4">
        <div class="row">
            <div class="col-md-12">
                <div class="post">
                    ...
                </div>
            </div>
        </div>
        <div class="row">
             <div class="col-md-12">
                <div class="post">
                    ...
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-4">
        <div class="row">
             <div class="col-md-12">
                <div class="post">
                    ...
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-4">
        <div class="row">
             <div class="col-md-12">
                <div class="post">
                    ...
                </div>
            </div>
        </div>
        <div class="row">
             <div class="col-md-12">
                <div class="post">
                    ...
                </div>
            </div>
        </div>
    </div>
</div>

选项2：

所以，我尝试使用这种方法，但我无法消除2 div之间的差距。请帮忙

<div class="row">
    <div class="col-md-12">
        <div class="row">
            <div class="col-sm-4">
                <div class="post">
                    ...
                </div>
            </div>
            <div class="col-sm-4">
                <div class="post">
                    ...
                </div>
            </div>
            <div class="col-sm-4">
                <div class="post">
                    ...
                </div>
            </div>
            <div class="col-sm-4">
                <div class="post">
                    ...
                </div>
            </div>
            <div class="col-sm-4">
                <div class="post">
                    ...
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

查看Wookmark或Masonry

等插件