0

我正在编辑一个基本的 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 有点工作，但我想要的两个帖子并没有如图所示排列是这张图片。我已经尝试调整宽度以防出现某种重叠，但这并不能解决问题（即使它们明显变小了）。

在此处输入图像描述

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

4

4 回答 4

3 
.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 伪元素清除容器后的任何浮动。

作为奖励，我要补充一点，这篇文章在这个主题上帮助了我很多：

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

于 2013-10-07T22:09:02.987 回答
1

您发布的代码按预期工作。见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;
}

带有边框/填充的演示和：http box-sizing: //jsfiddle.net/XqDn6/2/

于 2013-10-07T22:08:00.887 回答
0

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

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

使用 CSSbox-sizing: border-box;可能会有所帮助，因为它使最大宽度（包括填充和边框）是您定义的宽度（在本例中为 50%）；

于 2013-10-07T22:07:02.000 回答
0

问题是，正如在CSS 学校clear: both所读到的，

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

这是一个如何使用 clear 的示例：Understanding the CSS Clear Property。

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

解决方案：如果可以，请删除它或编辑问题以说明为什么存在（并且不能删除），以便我们可以进一步为您提供帮助。

于 2013-10-07T22:07:10.870 回答