34

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

我不想使用 JavaScript。如果调整浏览器窗口的大小，我希望块（<div>s）自动（并且相对）调整大小。

我已经很长时间没有使用 CSS 了。我不知道如何处理这个。

4

6 回答 6

47

演示在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>

于 2012-09-05T14:49:03.993 回答
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”，这将导致视觉重叠。

于 2012-09-05T15:31:29.353 回答
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>

于 2012-09-05T20:58:32.337 回答
1

我不想为<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>

于 2020-08-03T02:31:18.663 回答
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>

于 2012-09-05T14:51:41.387 回答
0

与其他帖子类似，但有一个重要区别是在 div 中进行这项工作。更简单的答案不是很容易复制粘贴，因为它们直接修改 div 或在整个页面上绘制。

这里的关键是包含 div 的分隔框具有相对定位，允许它与其他元素很好地位于您的文档中，而其中的四分之一具有绝对定位，使您可以在包含 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/

于 2019-07-03T07:44:17.783 回答