0

这涉及 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;
}

这甚至可能吗？

4

1 回答 1

0

我认为您正在寻找两列布局。您可以将奇数文章放在一个容器中（左栏），将偶数文章放在另一个容器中（右栏）。然后你可以让它们独立堆叠，没有间隙。

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 */
}

这是一个简单的小提琴

为了实现这一点，您必须分别列出奇数和偶数文章，我不知道如何在 Drupal 中做到这一点，但这是在每个 CMS 中都必须可行的事情（并且超出了这个问题的范围）。您可以在Drupal 文档和本文
中找到很好的起点（但文章只是分开：前半部分在左列，后半部分在右列）。

于 2013-05-31T11:19:55.623 回答