html - 无限两列div网格html css

Question

帮助我想创建一个无限的两列网格。它会自动将 div 排列成两列。例如我有 10 个 div，我想将它们排列成两列五行。对于十一个 div，我还想有两列，等等。提前谢谢你。

Answer 1

给你： http: //jsfiddle.net/g4v63rnz/
它是一个由两个块组成的无限容器，你可以在结构内添加尽可能多的元素将保持不变。

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