css - 7 div を 2 列で表示

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>

おそらくnth_childを使用して、HTMLを編集せずに4要素と3要素の2列に7 divを表示する方法はありますか?

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