CSS交替基于行的 float

Question

我不确定如何准确地称呼我的问题，因此标题晦涩难懂。

我的情况是这样的:

<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 个被第 3 个“半”搞砸了。最后两个是“相反的顺序”。我需要的是某种重置或其他解决方案，将 div 放在正确的位置，而不管它们之间是什么。

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

提前致谢

Answer 1

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

这个选择器:

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

不会查找 2n+1 次 .widget.half 子元素，而是仅针对 .widget.half 元素是 1、3、5 等 child 。