css - CSS 列の作成

Question

重複の可能性:
2 列のレイアウトの作成 - html/css セマンティクス

以下のコードを使用して、ブラウザー全体にまたがる div と、その中央に配置された別の div があります。

.wrapper {width: 1024px; margin: 0 auto; clear: both;}

ラッパー内に 2 つの列を作成するにはどうすればよいですか?

Answer 1

フロートを使用する（およびそれらをクリアする）か、を使用しますdisplay:inline-blocks。

ここで、私はあなたにカラフルな例を作りました.

html

<div class="wrapper">
    <div id="col1">a</div>
    <div id="col2">b</div>    
    <br style="clear:both" />
</div>

<hr />

<div class="wrapper">
    <div class="col">a</div>
    <div class="col">b</div>   
</div>

CSS

body {background:blue;}
.wrapper {width: 80%; margin:0px auto; background:red;height:300px;}

#col1 {width:50%;float:left;background:green; height:200px;}
#col2 {width:50%;float:right;height:200px;background:lightblue;}

.col {display:inline-block; width:49%;height:200px;background:pink;}