css：两列div

可能重复：

在我的网站中，我需要在一个

（黑色正方形，有点像一个容器）内添加两列

s。你可以从我所附的图纸上更容易地理解它

它应当：

支持主要浏览器（浏览器6不需要）

相对简单

轻松更改两列之间的空间大小

更改

的水平位置 非常感谢

试试这个：

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

.外部{宽度：100%；填充：20px；边框：1px实心#000；浮动：左；}
.red{宽度：20%；高度：40px；边框：2px实心红色；浮动：左侧；边距：20px；}
.green{宽度：20%；高度：40px；边框：2px纯绿色；浮动：左侧；边距：20px；}
.clear{clear:两者；}

---

希望对您有所帮助。

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

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

#黑色{高度：600px；宽度：500px；边框：2px实心#000000；}
#黑色分区{高度：80px；宽度：150px；边距顶部：20px；}
.green{边框：2px实心#009900；浮点：左；边距左：60px；}
.red{边框：2px实心#FF0000；浮点：右；边距右：60px；}

HTML

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

修改.container填充以更改容器内列的水平位置

---

JSFiddle:

我知道table元素非常讨厌，但是如果您想显示表格数据（不是为了设计），请使用table。请提供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>

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