css - css：两列div

Question

可能重复：
ie8 和 ie7 的 2 列 div

在我的网站中，我需要在一个<div>（黑色方块，它是一种容器）内添加两列<div>s。你可以从我附上的图更容易地理解它。

它应该：

1. 支持主流浏览器（不需要Explorer 6）
2. 相对简单
3. 轻松更改两列之间的空间大小。
4. 改变<div>s的水平位置。

非常感谢。

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

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填充以更改容器内列的水平位置。

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

Answer 3

试试这个：

 <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 4

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