Css 如何实现4列内容，将所有内容聚在一起？

为这个奇怪的标题问题道歉，这是一个很难解释的问题。我试图创建一个WordPress，它使用两列并排显示来自同一循环的内容。我想要达到的效果是这样的：

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

---

请帮忙

您必须创建列，然后放入内容

HTML:

​

---

请查收

你能添加你的css和html内容吗？我想这可能是设置paddings和height:auto属性的问题。我不能真正展示代码，因为我还没有尝试过。但是内容将由WordPress生成，因此我不能只是手动创建列并用内容填充它们-它需要对WordPress循环友好。我感谢反馈，但正如我在上面的评论中提到的，内容将由WordPress生成，因此，我无法手动创建列并用内容填充它们——它需要对WordPress循环友好，这是我遇到的绊脚石。我能想到的唯一方法是使用多个WordPress循环，在列中并排运行，并让每个下一个循环与前面一个循环中的帖子数量相抵消。这感觉像是一个混乱的解决方案。我没有使用wordpress，而是使用DrupalCMS。通常，当我想在CMS中做一些细微的更改时，我会在firefox中使用firbug adone并尝试查找css生成文件。然后我更改它，或者有时添加新的css文件，并使用它覆盖css。但如果你不能在wordpress中这样做，我想你最好了解wordpress主题系统是如何工作的。

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

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

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