css - 如何实现4栏内容，全部内容扎堆？

Question

为相当奇怪的标题问题道歉，这是一个难以解释的问题。我正在尝试创建一个 WordPress，它使用两列并排显示来自同一循环的内容。我想达到的效果将是这样的格式：

http://itsmeifrah.tumblr.com/

只有文字帖子而不是图像。不过，我对如何做到这一点感到困惑。我试过浮动所有 div 的左侧并为它们分配相同的宽度，但是当某些帖子比其他帖子长时，这会导致内容错位。另外，这是针对动态创建的内容，所以我必须想出一个对 WordPress 循环友好的解决方案。为了帮助说明这个问题，我绘制了以下相当粗糙的 png：

http://s13.postimage.org/yoo4z9g9z/content_misaligned.png

请帮忙！

Answer 1

您必须创建列，然后放置您的内容。

HTML：

<div class="multi_col">
    <div class="col">
        <div class="item">
          Item 1
        </div>
        <div class="item">
          Item 2
        </div>
        <div class="item">
          Item 3
        </div>
    </div>
    <div class="col">
        <div class="item">
          Item 1
        </div>
        <div class="item">
          Item 2
        </div>
    </div>
</div>

CSS：

.mutlti_col
{
    width: 420px;
}
.col
{
    float: left;
    width: 200px;
    margin-left: 10px;
}

.item
{
    width: 200px;
    margin-top: 10px;
}

​</p>

请检查jsfiddle。