如何将页面分成4个相等的部分？

Question

我想将我的页面分成四个相等的部分,每个部分具有相同的高度和宽度(50-50%).

我不想使用JavaScript.我想块(<div>或多个)以自动调整(相对),如果调整浏览器窗口.

我很长时间没有使用过CSS.我不知道如何处理这个问题.

Answer 1

HTML

<div id="div1">
</div>
<div id="div2">
</div>
<div id="div3">
</div>
<div id="div4">
</div>

CSS

html, body { height: 100%; padding: 0; margin: 0; }
div { width: 50%; height: 50%; float: left; }
#div1 { background: #DDD; }
#div2 { background: #AAA; }
#div3 { background: #777; }
#div4 { background: #444; }

演示http://jsfiddle.net/CRSVU/

Answer 2

如果您想要控制它们与源代码顺序分开放置的位置:

演示:http://jsfiddle.net/NmL2W/

<div id="NW"></div>
<div id="NE"></div>
<div id="SE"></div>?
<div id="SW"></div>

html, body { height:100%; margin:0; padding:0 }
div { position:fixed; width:50%; height:50% }
#NW { top:0;   left:0;   background:orange  }
#NE { top:0;   left:50%; background:blue    }
#SW { top:50%; left:0;   background:green   }
#SE { top:50%; left:50%; background:red     }    ?

注意:如果您想要在您的区域上填充,则需要将其设置box-sizing为border-box:

div {
  /* ... */
  padding:1em;
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
}

...否则你的"50%"宽度和高度变成"50%+ 2em",这将导致视觉重叠.

Answer 3

这里有一些很好的答案，但只是添加了一种不受边框和填充影响的方法：

<style type="text/css">
html, body{width: 100%; height: 100%; padding: 0; margin: 0}
div{position: absolute; padding: 1em; border: 1px solid #000}
#nw{background: #f09; top: 0; left: 0; right: 50%; bottom: 50%}
#ne{background: #f90; top: 0; left: 50%; right: 0; bottom: 50%}
#sw{background: #009; top: 50%; left: 0; right: 50%; bottom: 0}
#se{background: #090; top: 50%; left: 50%; right: 0; bottom: 0}
</style>

<div id="nw">test</div>
<div id="ne">test</div>
<div id="sw">test</div>
<div id="se">test</div>