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;
}

查看 caniuse 上的浏览​​器支持。

Answer 2

#big_div{
     width: 100%;
     zoom:1;
}

#big_div div{
     float:left;
     width:50%;
}
#big_div:after{
     content:"";
     display:block;
     clear:both;
}

Answer 3

在不添加 html 的情况下使用 nth-child(1n+4)，注意 nth-child 不会在所有浏览器上工作（例如旧的 IE 浏览器）

CSS

对于行

#big_div{
     width: 100%;
}

#big_div div{
     float:left;
     width:33%; //(100% / 3 )
}

#big_div div:nth-child(1n+4){
     float:left;
     width:25%; //100% / 4
}