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

时间：2021-08-02 16:20:23

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。我想要块(

s)在浏览器窗口被调整大小时自动调整大小。

I have not worked with CSS for a long time. I've no idea how to handle this.

我很久没有使用CSS了。我不知道该怎么处理这件事。

4 个解决方案

#1

32  

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/

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

#2

6  

If you want to have control over where they are placed separate from source code order:

如果您想要控制它们被放置在哪里，与源代码顺序分开:

Demo: 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-sizing to border-box:

注意:如果您希望在您的区域上填充，您需要将box尺寸设置为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”，这将导致视觉重叠。

#3

3  

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>

#4

0  

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文件中，然后打开您的浏览器。

#1

32  

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/

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

#2

6  

If you want to have control over where they are placed separate from source code order:

如果您想要控制它们被放置在哪里，与源代码顺序分开:

Demo: 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-sizing to border-box:

注意:如果您希望在您的区域上填充，您需要将box尺寸设置为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”，这将导致视觉重叠。

#3

3  

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>

#4

0  

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文件中，然后打开您的浏览器。

标签：

相关文章