0

我不确定如何准确地调用我的问题，因此这个神秘的标题。

我的情况如下：

<div class="widget full">foobar</div>
<div class="widget half">left</div>
<div class="widget half">right</div>
<div class="widget half">left</div>
<div class="widget full">foobar</div>
<div class="widget full">foobar</div>
<div class="widget half">left</div>
<div class="widget half">right</div>

我让这些小部件左右浮动，基于奇数或偶数 css：

#main > div.widget.full { display: block; width: 100%; }
#main > div.widget.half { display: block; width: 49%; }
#main > div.widget.half:nth-child(2n+1) { float: right; }

前 2 个“半”的作用就像一个魅力，但之后的 2 个被第三个“半”搞砸了。最后两个是“颠倒的顺序”。我需要的是某种重置或其他解决方案，将 div 放在正确的位置，无论它们之间是什么。

如果没有 CSS 答案，我可以修复它在 PHP 中生成它们，但 CSS 有我的偏好，因为它是一个样式问题。

提前致谢

4

2 回答 2

0

不幸的是，您将无法仅通过 css 实现此目的。

这个选择器：

#main > div.widget.half:nth-child(2n+1)

不会查找子元素的2n+1出现.widget.half，而是仅针对.widget.half子元素编号为 1、3、5 等的元素。

于 2013-07-09T11:02:10.343 回答
0

作为替代方案，除非有任何理由说您的.halfdiv 需要固定在左侧或右侧，否则您不能只将 afloat:left应用于每个.halfdiv，并将 aclear:both应用于整个 div 吗？

在这个例子中，它似乎工作正常

CSS

#main > div.widget.full {
    display: block;
    width: 100%;
    outline: solid 1px blue;
    clear:both;
}
#main > div.widget.half {
    display: block;
    width: 49%;
    outline: solid 1px red;
    float:left;
}

JsFiddle - 我添加了一些颜色，这样会更明显。

于 2013-07-09T11:33:02.403 回答