html - CSS Clear取决于元素的奇数或偶数

Question

我在一个页面中布置多个表格，我想知道是否可以仅使用 CSS 根据表格总数更改布局。总体条件是始终至少有 2 个并排的 table 和最多 3 个宽的 table 。因此，在每第 3 个 child 之后清除奇数，并在每第 2 个 child 之后清除偶数。这可行吗？

4 个表的示例:

哦

哦

包含 5 个表的示例:

哦哦

哦

Answer 1

虽然 CSS 不能直接确定一个元素的子元素数量，但您可以使用应该满足您需要的同级选择器做一些有趣的事情:

.table:first-child:nth-last-child(4) + .table + .table {
    clear: both;
}

.table:first-child:nth-last-child(5) + .table + .table + .table {
    clear: both;
}

注意:为简洁起见，我只是将 div 与 class="table" 结合使用。理论上，这可以适用于任何选择器。

Example Fiddle