css - 如何创建具有 4 个矩形分割的网页？

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

这应该可以解决问题，这里是 Fiddle 的链接：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/