无限两列div网格htmlcss

Question

帮助我想创建一个无限的两列网格。它会自动将 div 排列成两列。比如我有10个div，我想把它们排成两列五行。十一divs，我想还有两栏等等，先谢谢了。

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

无限两列div网格htmlcss

infinite two column div grid html css

html

css

grid

two-columns