html/css段屏幕分为4个象限

Question

我想制作一个网页分割的布局,如下图所示:

我一直在尝试使用表格标签,但我需要使用整个屏幕(100%宽度和高度),我宁愿使用更现代的标签,因为我不得不最终在其中一个段中使用画布.

Answer 1

像这样？http://jsfiddle.net/NmjfE/

HTML:

<div class="tl"></div>
<div class="tr"></div>
<div class="bl"></div>
<div class="br"></div>

CSS:

.tl { position: absolute; top: 0; left: 0; right: 30%; bottom: 30%; 
      background: red; border:solid #000; border-width: 0 10px 10px 0; }
.tr { position: absolute; top: 0; left: 70%; right: 0; bottom: 30%; 
      background: blue; border:solid #000; border-width: 0 0 10px 0; }
.bl { position: absolute; top: 70%; left: 0; right: 30%; bottom: 0; 
      background: yellow; border:solid #000; border-width: 0 10px 0 0; }
.br { position: absolute; top: 70%; left: 70%; right: 0; bottom: 0; 
      background: green; }