css - css：divの2列

Question

重複の可能性：
ie8とie7の2列のdiv

私のウェブサイトでは、<div>（コンテナの一種である黒い四角）の中に2列の<div>sを追加する必要があります。添付の図面からわかりやすくなります。

そうすべき：

1. 主要なブラウザをサポートします（エクスプローラー6は不要）
2. 比較的シンプルであること
3. 2つの列の間のスペースサイズを簡単に変更できます。
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

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パディングを変更して、2 つの列の間のスペース サイズを変更します。

.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 をコピーできます。