css - CSS 中的四个象限

Question

有了这个 fiddle https://jsfiddle.net/8kh5Lw9r/正如预期的那样，我得到了四个象限。

HTML

<div id="one"><p>One</p></div>
<div id="two"><p>Two</p></div>
<div id="three"><p>Three</p></div>
<div id="four"><p>Four</p></div>

CSS

div {
    position: fixed;
    border: 1px dashed red;
}

#one {
    height: 40%;
    width: 35%;
}
#two {
    height: 40%;
    width: 65%;
}
#three {
    height: 60%;
    width: 35%;
}
#four {
    height: 60%;
    width: 65%;
}

但是:

1. 为什么 DIV 没问题时四个段落会捆绑在一起？
2. 有没有办法通过在一个地方指定 40/60 和 35/65 来避免重复？

编辑:如果您指出我对 CSS 工作原理的理解错误，我将不胜感激。一个答案很好，但告诉我哪里错了更有帮助。

Answer 1

您的 div 实际上并不合适。更改边框的大小和颜色可能会使其更加清晰，如下例所示。

div {
  position: fixed;
}
#one {
  border: 2px dashed blue;
  height: 40%;
  width: 35%;
}
#two {
  border: 1px solid red;
  height: 40%;
  width: 65%;
}
#three {
  border: 2px dashed green;
  height: 60%;
  width: 35%;
}
#four {
  border: 2px solid black;
  height: 60%;
  width: 65%;
}

<div id="one"><p>One</p></div>
<div id="two"><p>Two</p></div>
<div id="three"><p>Three</p></div>
<div id="four"><p>Four</p></div>

发生的事情是它们都从位置 (0,0) 开始，但是因为它们的大小不同，所以形成了一个网格。你的百分比加起来是 100%，但因为它们都有相同的起点，所以它们实际上并没有占 100%。最大的是65% x 65%，所以整个网格只有65% x 65%。

您可以通过删除固定大小来解决此问题，或者如果您确实希望固定位置，则可以通过设置 x 和 y 坐标来解决此问题。

通过为不同的宽度和高度使用类，您可以避免使用 id。

div {
  position: fixed;
  border: 1px dashed red;
  box-sizing: border-box;
}
.top    { height: 40%; top:    0; }
.bottom { height: 60%; bottom: 0; }
.left   { width:  35%; left:   0; }
.right  { width:  65%; right:  0; }

<div class="top left"><p>One</p></div>
<div class="top right"><p>Two</p></div>
<div class="bottom left"><p>Three</p></div>
<div class="bottom right"><p>Four</p></div>

box-sizing: border-box 并不是必需的，它只是让您将边框合并到 div 的大小中。没有它，您会看到两条边框相交，div 可能会稍微偏离页面末尾。