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＆amp; 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;
}

应该这样做。 Box大小调整使divs宽度计算宽度减去填充和边框。因此，填充或边界不会添加到声明的宽度。 （我认为这是解释它的最佳方式）。 :: after伪元素清除容器后的任何浮点数。

作为奖励，我将补充一点，这篇文章帮助我完成了这个主题：

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

Answer 2

您发布的代码按预期工作。见http://jsfiddle.net/XqDn6/1/

问题很可能是article元素上的一些边距/填充，导致每个元素的宽度超过50％，因此不能连续拟合2个。

解决此问题的一种方法是使用box-sizing: border-box，这意味着边框/填充包含在width值中。

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

使用边框/填充和box-sizing：http://jsfiddle.net/XqDn6/2/

进行演示

Answer 3

它对我来说很好：http://codepen.io/skimberk1/pen/6127d1c3a4961de1f9c1ef20d5400d0f。

我不知道你的情况会出现什么问题。也许其他一些CSS正在影响它？

使用CSS box-sizing: border-box;可能有所帮助，因为它使得最大宽度（包括填充和边框）是您定义的宽度（在这种情况下为50％）;

Answer 4

问题是clear: both，如CSS schools中所述，

  

指定段落的左侧或右侧不允许使用浮动元素。

以下是一个可以使用清晰度的示例：Understanding the CSS Clear Property。

虽然float是用于拉伸容器的旧解决方案，但可以在此处看到：Clearing floats。

解决方案：如果您可以删除或编辑问题，说明原因（并且无法取消），以便我们为您提供进一步的帮助。