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中找到好的起点（但是这些文章只是分开：左栏的前半部分，右栏的后半部分）。

如何堆叠两个重复的随机高度div行没有任何空格

1 个答案: