如何实现4栏内容，全部内容扎堆？答案

【问题标题】：How to achieve 4 columns of content, all content bunched up?如何实现4栏内容，全部内容扎堆？
【发布时间】：2012-12-09 13:37:57
【问题描述】：

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

http://itsmeifrah.tumblr.com/

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

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

请帮忙！

【问题讨论】：

你能添加你的css和html内容吗？我认为这可能是设置填充和高度的问题：自动属性。
我不能真正炫耀代码，因为我还没有尝试过。但是内容将由 WordPress 生成，因此我不能只是手动创建列并用内容填充它们 - 它需要是 WordPress 循环友好的。

标签： css wordpress loops css-float alignment

【解决方案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;
}

请查看jsfiddle。

【讨论】：

感谢您的反馈，但正如我在上面的评论中提到的，内容将由 WordPress 生成，因此我无法手动创建列并使用内容填充它们 - 它需要成为 WordPress 循环友好的东西，这是我遇到的绊脚石。我能想到的唯一方法是使用多个 WordPress 循环，并排排列在列中，并让每个下一个循环抵消前一个循环中的帖子数量。不过，这感觉像是一个混乱的解决方案。
我没用过wordpress，但用过drupal cms。通常，当我想在 CMS 中进行细微更改时，我所做的是在 firefox 中使用 firbug adone 并尝试找到 css 生成文件。然后我更改它，或者有时我添加新的 css 文件并使用它来覆盖 css。但是如果你不能在 wordpress 中这样做，我认为你最好了解 wordpress 主题系统是如何工作的。