Html 如何将页面分成4个相等的部分？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12284044/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to split page into 4 equal parts?
提问by Santosh Kumar
I want to divide my page into four equal parts, each of same height and width (50-50%).
我想将我的页面分成四个相等的部分，每个部分都具有相同的高度和宽度(50-50%)。
I don't want to use JavaScript. I want blocks (<div>s)to be resized automatically (and relatively)if the browser window is resized.
我不想使用 JavaScript。如果浏览器窗口调整大小，我希望块（<div>s）自动（和相对）调整大小。
I have not worked with CSS for a long time. I've no idea how to handle this.
我已经很久没有使用 CSS 了。我不知道如何处理这个。
回答by Scott Brown
HTML
HTML
<div id="div1">
</div>
<div id="div2">
</div>
<div id="div3">
</div>
<div id="div4">
</div>
CSS
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; }
Demo at http://jsfiddle.net/CRSVU/
回答by Phrogz
If you want to have control over where they are placed separate from source code order:
如果您想控制它们与源代码顺序分开的位置：
Demo: http://jsfiddle.net/NmL2W/
演示：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 } ?
Note: if you want padding on your regions, you'll need to set the box-sizingto border-box:
注意：如果你想在你的区域上填充，你需要设置box-sizing为border-box：
div {
/* ... */
padding:1em;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
…otherwise your "50%" width and height become "50% + 2em", which will lead to visual overlaps.
…否则你的“50%”宽度和高度变成“50% + 2em”，这将导致视觉重叠。
回答by robC
Some good answers here but just adding an approach that won't be affected by borders and padding:
这里有一些很好的答案，但只是添加了一种不受边框和填充影响的方法：
<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>
回答by Swordopolis
Similar to other posts, but with an important distinction to make this work inside a div. The simpler answers aren't very copy-paste-able because they directly modify div or draw over the entire page.
与其他帖子类似，但有一个重要的区别，即在 div 中进行这项工作。更简单的答案不是很容易复制粘贴，因为它们直接修改 div 或在整个页面上绘制。
The key here is that the containing div dividedbox has relative positioning, allowing it to sit nicely in your document with the other elements, while the quarters within have absolute positioning, giving you vertical/horizontal control inside the containing div.
这里的关键是包含 div 的dividbox 具有相对定位，允许它与其他元素很好地位于您的文档中，而其中的四分之一具有绝对定位，使您可以在包含 div 内进行垂直/水平控制。
As a bonus, text is responsively centered in the quarters.
作为奖励，文本响应地集中在四分之一处。
HTML:
HTML：
<head>
<meta charset="utf-8">
<title>Box model</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 id="title">Title Bar</h1>
<div id="dividedbox">
<div class="quarter" id="NW">
<p>NW</p>
</div>
<div class="quarter" id="NE">
<p>NE</p>
</div>
<div class="quarter" id="SE">
<p>SE</p>
</div>?
<div class="quarter" id="SW">
<p>SW</p>
</div>
</div>
</body>
</html>
CSS:
CSS：
html, body { height:95%;} /* Important to make sure your divs have room to grow in the document */
#title { background: lightgreen}
#dividedbox { position: relative; width:100%; height:95%} /* for div growth */
.quarter {position: absolute; width:50%; height:50%; /* gives quarters their size */
display: flex; justify-content: center; align-items: center;} /* centers text */
#NW { top:0; left:0; background:orange; }
#NE { top:0; left:50%; background:lightblue; }
#SW { top:50%; left:0; background:green; }
#SE { top:50%; left:50%; background:red; }
回答by thatuxguy
try this... obviously you need to set each div to 25%. You then will need to add your content as needed :) Hope that helps.
试试这个...显然你需要将每个 div 设置为 25%。然后，您需要根据需要添加您的内容 :) 希望有所帮助。
<html>
<head>
<title>CSS devide window by 25% horizontally</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">
body {
margin:0;
padding:0;
height:100%;
}
#top_div
{
height:25%;
width:100%;
background-color:#009900;
margin:auto;
text-align:center;
}
#mid1_div
{
height:25%;
width:100%;
background-color:#990000;
margin:auto;
text-align:center;
color:#FFFFFF;
}
#mid2_div
{
height:25%;
width:100%;
background-color:#000000;
margin:auto;
text-align:center;
color:#FFFFFF;
}
#bottom_div
{
height:25%;
width:100%;
background-color:#990000;
margin:auto;
text-align:center;
color:#FFFFFF;
}
</style>
</head>
<body>
<div id="top_div">Top- height is 25% of window height</div>
<div id="mid1_div">Middle 1 - height is 25% of window height</div>
<div id="mid2_div">Middle 2 - height is 25% of window height</div>
<div id="bottom_div">Bottom - height is 25% of window height</div>
</body>
</html>
Tested and works fine, copy the code above into a HTML file, and open with your browser.
经测试，工作正常，将上面的代码复制到一个 HTML 文件中，然后用浏览器打开。
