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

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
}

在2列中显示7 div

3 个答案: