4つの矩形分割でWebページを作成するにはどうすればよいですか？

Question

CSSとdivを使って4分割画面を作成するにはどうすればいいですか？

Answer 1

HTMLは次のようになります。

<div class="box"> 
    Area 1 
</div> 

<div class="box"> 
    Area 2 
</div> 

<div class="box"> 
    Area 3 
</div> 

<div class="box"> 
    Area 4 
</div> 

CSSは次のようになります。

html, body { 
    width: 100%; 
    height: 100%; 
} 

.box { 
    float: left; 
    width: 50%; 
    height: 50%; 
} 

はここでプレーするフィドルです：http://jsfiddle.net/UMKWU/

Answer 2

<div class="one" style="float: left; width: 50%; height: 50%;"> 

</div> 

<div class="two" style="float: left; width: 50%; height: 50%;"> 

</div> 

<div class="three" style="float: left; width: 50%; height: 50%;"> 

</div> 

<div class="four" style="float: left; width: 50%; height: 50%;"> 

</div> 

Answer 3

質問にコメントすることはできません。そうでなければ、Jordanによる最初の回答にコメントを追加するだけです。彼の答えは正しいですが、ボーダーを追加するときには、ボーダー幅を考慮する必要があります。その場合は、CSSにborder-width:1%;を追加してwidth:49%; height: 49%;を変更してください。トリックを行う必要があります

は、ここではフィドルへのリンクです：http://jsfiddle.net/UMKWU/3/

Answer 4

こんにちは、あなたがこの

のCss

html, body { 
    width: 100%; 
    height: 100%; 
} 

.box1, .box2, .box3, .box4 { 
    float: left; 
    width:49%; 
    height: 49%; 
    border-style: solid; 
    border-width:1%; 
} 

.box3{ 
    clear:left; 
} 
​ 

HTML

<div class="box1"> 
Area 1 
</div> 

<div class="box2"> 
    Area 2 
</div> 

<div class="box3"> 
Area 3 
</div> 

<div class="box4"> 
Area 4 
</div>​ 

など行うことができます

ライブデモはこちらhttp://jsfiddle.net/rohitazad/UMKWU/8/