Css 在2列中显示7个div

我有一个包含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，请使用第n个子项（1n+4），注意第n个子项不能在所有浏览器上工作（例如，较旧的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
}

---

如果不添加html，请使用第n个子项（1n+4），注意第n个子项不能在所有浏览器上工作（例如，较旧的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
}

---

如果在“列”（columns）中需要它们，这里有一个更现代的解决方案：

---

.

如果您需要在“列”（columns）中使用它们，这里有一个更现代的解决方案：

---

.

您是指列还是行？你布置它们的方式意味着行。你是指列还是行？您布置它们的方式意味着行

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

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