如何将页面分成四个等份？

Question

如何将页面分成四个等份？

htmlcss

36

我希望将我的页面分为四个相等的部分，每个部分的高度和宽度相同(50-50%)。

我不想使用JavaScript。如果浏览器窗口大小改变，我希望块元素(<div>)自动地且相对地调整大小。

我已经很久没有使用CSS了，不知道该如何处理。

- Santosh Kumar

2

你需要一个2x2的网格吗？ - j08691

6个回答

10

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

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 }

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

JSFiddle演示

注意：如果您想在区域上设置填充，则需要将box-sizing设置为border-box：

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

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

- Phrogz

5

这里有一些不错的答案，但我想补充一种不会受到边框和填充影响的方法：

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}

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

- robC

谢谢。简直不敢相信我在这上面浪费了这么多时间。你的解决方案非常有效。 - mark1234

我有一个问题，为什么底部行的bottom=0而不是100%，右侧列也是如此，right=0而不是100%。就像我说的它可以工作，只是好奇。 - mark1234

2

我不想为<body>标签和<html>标签添加样式。

.quodrant{
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0;
}

.qtop,
.qbottom{
    width: 100%;
    height: 50vh;
}

.quodrant1,
.quodrant2,
.quodrant3,
.quodrant4{
    display: inline;
    float: left;
    width: 50%;
    height: 100%;
}

.quodrant1{
    top: 0;
    left: 50vh;
    background-color: red;
}

.quodrant2{
    top: 0;
    left: 0;
    background-color: yellow;
}

.quodrant3{
    top: 50vw;
    left: 0;
    background-color: blue;
}

.quodrant4{ 
    top: 50vw;
    left: 50vh;
    background-color: green;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link type="text/css" rel="stylesheet" href="main.css" />
</head>
<body>

<div class='quodrant'>
    <div class='qtop'>
        <div class='quodrant1'></div>
        <div class='quodrant2'></div>
    </div>
    <div class='qbottom'>
        <div class='quodrant3'></div>
        <div class='quodrant4'></div>
    </div>
</div>

<script type="text/javascript" src="main.js"></script>
</body>
</html>

或者使其看起来更漂亮。

.quodrant{
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0;
}

.qtop,
.qbottom{
    width: 96%;
    height: 46vh;
}

.quodrant1,
.quodrant2,
.quodrant3,
.quodrant4{
    display: inline;
    float: left;
    width: 46%;
    height: 96%;
    border-radius: 30px;
    margin: 2%;
}

.quodrant1{
    background-color: #948be5;
}

.quodrant2{
    background-color: #22e235;
}

.quodrant3{
    background-color: #086e75;
}

.quodrant4{ 
    background-color: #7cf5f9;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link type="text/css" rel="stylesheet" href="main.css" />
</head>
<body>

<div class='quodrant'>
    <div class='qtop'>
        <div class='quodrant1'></div>
        <div class='quodrant2'></div>
    </div>
    <div class='qbottom'>
        <div class='quodrant3'></div>
        <div class='quodrant4'></div>
    </div>
</div>

<script type="text/javascript" src="main.js"></script>
</body>
</html>

- Weilory

0

与其他帖子类似，但有一个重要的区别，使其可以在 div 内部工作。简单的答案并不容易复制粘贴，因为它们直接修改 div 或覆盖整个页面。

关键在于包含 div dividedbox 具有相对定位，使其可以与其他元素很好地放置在文档中，而其中的四分之一具有绝对定位，使您可以在包含 div 内部进行垂直/水平控制。

作为奖励，文本在四分之一中响应式居中。

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：

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;        }

http://jsfiddle.net/og0j2d3v/

- Swordopolis

0

试试这个... 显然你需要将每个 div 设置为 25%。然后根据需要添加内容 :) 希望能帮到你。

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;
}

<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>

- thatuxguy

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user527892 · Accepted Answer

示例请参见http://jsfiddle.net/CRSVU/

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;
}

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