CSS：两个div列

Question

可能重复：
2 columns div for ie8 and ie7

在我的网站

，我需要一个<div>里面添加（黑方块，这是不大不小的容器）的<div>的两个列。你可以从我附上的图中更容易理解它。

它应该：

1. 支持主流浏览器（Explorer 6中不需要）
2. 相对简单
3. 变化的两列之间的空间大小，很容易。
4. 改变<div>小号卧式位置。

许多感谢。

Answer 1

<style type="text/css"> 
#black {height:600px;width:500px;border:2px solid #000000;} 
#black div{height:80px;width:150px;margin-top:20px;} 
.green {border:2px solid #009900;float:left;margin-left:60px;} 
.red{border: 2px solid #FF0000;float:right;margin-right:60px;} 
</style> 

    <div id="black"> 
     <div class="green"></div> <div class="red"></div> 
     <div class="green"></div> <div class="red"></div> 
     <div class="green"></div> <div class="red"></div> 
     <div class="green"></div> <div class="red"></div> 
    </div> 

Answer 2

尝试这样的：

<style>   
     .outer{width:100%; padding: 20px; border:1px solid #000; float: left;} 
     .red{width: 20%; height: 40px; border:2px solid red; float: left; margin: 20px;} 
     .green{width: 20%; height: 40px; border:2px solid green; float: left; margin: 20px;} 
     .clear{clear:both;} 
    </style> 

    <div class="outer"> 
     <div class="red"></div> 
     <div class="green"></div> 
     <div class="clear"></div> 
     <div class="red"></div> 
     <div class="green"></div> 
    </div> 

希望它会帮助你。

Answer 3

嵌套列可分为网格系统和流体网格系统。 你可以从Bootstrap信息并复制其嵌套列CSS。

Answer 4

HTML

<div class="container"> 
    <div class="box col1"></div> 
    <div class="box col2"></div> 
    <div class="box col1"></div> 
    <div class="box col2"></div> 
    <div class="box col1"></div> 
    <div class="box col2"></div> 
</div> 

CSS

.container {width:100%; padding: 50px; border:2px solid #000; float: left;} 
.box {width:100px;height:100px;margin: 10px;} 
.col1 {border:2px solid red;float:left;clear:left;} 
.col2 {border:2px solid green;float:left;} 

修改.box的填充，以改变两列之间的空间的大小

修改.container p增加改变容器内柱子的水平位置。

的jsfiddle：http://jsfiddle.net/reB7v/