无限两列div网格html css

时间:2015-02-22 18:12:58

标签: html css grid two-columns

HELP 我想创建一个无限的两列网格。它会自动将div排列成两列。例如,我有10个div,我想安排成两列五行。对于十一个div,我想仍然有两列,等等。先谢谢你。

1 个答案:

答案 0 :(得分:0)

你走了:http://jsfiddle.net/g4v63rnz/
它是一个两个积木的infinte容器,你可以添加尽可能多的元素在结构内部保持不变。

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