将浮动的div元素垂直对齐到顶部和底部

Question

我有一个文章标签，里面是从WordPress生成文章的php代码。它们并不都是相同的高度，这取决于内容。它们通过浮动在两列中组织。

如果第一行的文章与同一行中的其他文章高度不同，则第二行将与更大的div底部对齐。现在我想要将它们对齐而没有任何间隔。

以下是一些CSS：

#container {
width: 1000px;
margin: 0px auto;
}

article {
position: relative;
width: 435px;
margin: 10px 10px;
background-color: rgba(0, 0, 0, 0.5);
padding: 20px;
float: left;
}

编辑jsFiddle（现在有内容来演示问题）：http://jsfiddle.net/4PMj5/6/

- Emir Dupovac

---

@Morpheus 边距不是问题。 - Emir Dupovac

@Emir Dupovac，如果您能创建一个 jsfiddle 示例来说明您的问题，那就太好了。 - Morpheus

好的，这是它的链接：http://jsfiddle.net/4PMj5/4/ - Emir Dupovac

请解释一下“现在我想让它们对齐，没有任何间隔”的含义。 - JSantos

@EmirDupovac 请问您能否提供一下您想要实现的内容的示例呢？ - ᴍᴀᴛᴛ ʙᴀᴋᴇʀ

Answer 1

你可以在CSS中使用even和odd子元素伪类选择器。

article:nth-child(even) {
    position: relative;
    width: 435px;
    margin: 10px 10px;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 20px;
    float: right;
}
article:nth-child(odd) {
    position: relative;
    width: 435px;
    margin: 10px 10px;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 20px;
    float: left;
}

结果将会是这样的：这个更新后的代码片段。

- hjpotter92