HTML div 子节点未对齐

Question

我正在编辑一个基本的 Wordpress 模板，并希望有一个多栏首页(每行显示 2 组文章)。我在 CSS 中完成了以下操作:

.front-page-container article:nth-child(odd) {
        width:50%;
        float:left;
        clear:both;
}
.front-page-container  article:nth-child(even) {
        width:50%;
        float:right;
}

其中 front-page-contaner 是包含 div 的类。 HTML 结构是:

<div class="front-page-container">
    <article id="post-1"></article>
    <article id="post-2"></article>
    <article id="post-3"></article>
    <!-- etc -->
</div>

我想将帖子 1 和 2 对齐在同一行，并将帖子 3(和 4)放在下一行。

虽然 CSS 可以正常工作，但我想要放在一起的两个帖子并没有对齐，如图所示。我已经尝试调整宽度以防出现某种重叠，但这并不能解决问题(即使它们明显变小)。

任何帮助/指点将不胜感激:)

Answer 1

.front-page-container::after { clear: both }

.front-page-container * {
   box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
}

.front-page-container article:nth-child(odd) {
        width:50%;
        float:left;
}
.front-page-container  article:nth-child(even) {
        width:50%;
        float:right;
}

应该可以了。框尺寸使 div 宽度减去填充和边框的计算宽度。因此，没有填充或边框会增加声明的宽度。 (我认为这是解释它的最佳方式)。::after 伪元素清除容器后的任何 float 。

作为奖励，我要补充一点，这篇文章在这个主题上对我帮助很大:

http://css-tricks.com/dont-overthink-it-grids/