css - 如何在没有任何空间的情况下堆叠两行重复的随机高度div

Question

这涉及到 Drupal，但实际上是一个 css 问题。我从数据库中提取内容量不同的节点，所以每个 <article/>是一个不可预测的高度。但我需要在左边叠加赔率，在右边叠加偶数。基本上我希望两边的每一行之间没有空间(或者更确切地说是 24px 的底部边距)。我已经尝试了几个版本，但无论如何总是有一个更高的 <article/>将另一列向下推。

当前的CSS是...

article {
   margin-bottom: 24px;
   background-color: #f6f6f8;
   width: 49%;
   display: inline-block;
   position: relative;
   vertical-align: top;

   /* for IE7 */
   zoom:1;
   *display:inline;
}

article.odd {
   float: left;
   clear: left;
}

article.even {
   margin-left: 18px;
}

这可能吗？

Answer 1

我认为您正在寻找两列布局。您可以将奇数元素放入一个容器(左栏)，将偶数元素放入另一个容器(右栏)。然后您可以将它们独立堆叠，没有间隙。

HTML

<div class="column"> <!-- left column: odd articles -->
    <article>...</article>
    ...
    <article>...</article>
</div>
<div class="column"> <!-- right column: even articles -->
    <article>...</article>
    ...
    <article>...</article>
</div>

CSS

.column {
    float: left;
    width: 45%; /* or fixed amount */
    margin-right: 5%; /* or fixed amount */
}

Here's a simple Fiddle

要做到这一点，你必须分别列出奇数和偶数文章，我不知道如何在 Drupal 中做到这一点，但这是在每个 CMS 中都必须可行的事情(并且超出了这个问题的范围).
您可以在 Drupal Documentation 中找到很好的起点在this article (但那里的文章只是分开的:前半部分在左栏，后半部分在右栏)。