我不确定如何准确地称呼我的问题,因此标题晦涩难懂。
我的情况是这样的:
<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,因为它是一个样式问题。
提前致谢
最佳答案
不幸的是,您将无法仅通过 css 实现此目的。
这个选择器:
#main > div.widget.half:nth-child(2n+1)
不会查找 2n+1
次 .widget.half
子元素,而是仅针对 .widget.half
元素是 1、3、5 等 child 。
关于CSS交替基于行的 float ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17546481/