html - 無限の2列のdivグリッドhtml css

Question

ヘルプ 無限の 2 列グリッドを作成したいと考えています。自動的に div を 2 列に配置します。たとえば、10 個の div があり、2 列 5 行に配置したいと考えています。11 div の場合は、まだ 2 列などを希望します。よろしくお願いします。

Answer 1

ここに行きます: http://jsfiddle.net/g4v63rnz/
これは 2 つのブロックの無限のコンテナーです。構造内に要素をいくつでも追加できます。

HTML:

<div id='container'>
  <div class='innerDiv'></div>    
  <div class='innerDiv'></div>    
  <div class='innerDiv'></div>    
  <div class='innerDiv'></div>    
  <div class='innerDiv'></div>    
  <div class='innerDiv'></div>    
  <div class='innerDiv'></div>    
  <div class='innerDiv'></div>  
  <div class='innerDiv'></div>    
  <div class='innerDiv'></div>  
</div>

CSS:

 #container  {
   width:500px;
   overflow:hidden;
   background-color:pink;
   display:inline-block;
  }

.innerDiv {
  position:relative;
  float:left;
  width:40%;
  height:150px;
  margin-left:4%;
  margin-top:10px;
  background-color:yellow;
}