css - 在 2 列中显示 7 个 div

Question

我有一个包含 7 个 div 的大 div

<div id="big_div">
  <div>a</div> <div>a</div> <div>a</div> 
  <div>b</div> <div>b</div> <div>b</div><div>b</div>
</div>

有没有办法在不编辑 HTML 的情况下在两列 4 和 3 元素中显示 7 div，也许使用 nth_child？

#big_div{
}

#big_div div{
}

Answer 1

如果您需要在“列”( DEMO ) 中使用它们，这里有一个更现代的解决方案:

#big_div {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
}

#big_div div:nth-child(3) { 
    -moz-column-break-after: always;
    -webkit-column-break-after: always;
    break-after: always;
}

Have a look at browser support at caniuse .