CSS中的四个象限

Question

有了这个小提琴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

你的Content-Type: application/x-www-form-urlencoded实际上并不好。更改边框的大小和颜色可能会更清晰，如下例所示。

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

发生的事情是它们都是从位置（0,0）开始，但因为它们都是不同的大小，所以它构成了一个网格。您的百​​分比加起来达到100％，但因为它们都有相同的起点，所以它们实际上并没有达到100％。最大的一个是65％乘65％，因此整个电网只有65％到65％。

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

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

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

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可能会偏离页面的末尾。

Answer 2

1。）因为你为所有四个DIV设置了position: fixed;。这会将它们固定在视口/窗口的左上角（在您的情况下）。只需删除它。

2。）是的，使用类而不是ID。这些可以应用于多个元素，例如

.x {
  height: 40%;
  width: 65%;
}

<div class="x">...</div> 

Answer 3

你可以试试这个：

 .wrapper {
  position: fixed;
  display: block;
  width: 100%;
  height: 100%;
}

#one, #two, #three, #four {
  border: 1px dashed red;
  box-sizing: border-box;
  float: left;
}

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

<div class="wrapper">
  <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>
</div>

Answer 4

解决这些问题的一种方法：

＆＃13;

＆＃13;

x in s

＆＃13;

body {
  height: 300px;
}

div {
    border: 1px dashed red;
    float: left;
}

#one, #two {
    height: 40%;
    border-bottom: none
}

#three, #four {
  height: 20%;
}

#one, #three {
    width: 35%;
}

#two, #four {
  width: 30%;
  border-left: none;
}

＆＃13;

＆＃13;

＆＃13;

Answer 5

我认为这可以起作用

body{
  margin:0;
}
div {
    position: fixed;
    border: 1px dashed red;
}
#box{
  height: 60%;
    width: 65%;
}
#one {
    height: 40%;
    width: 35%;
}
#two {
    height: 40%;
    left: 35%;
    width: 30%;
}
#three {
    top:40%;
    height: 20%;
    width: 35%;
}
#four {
   top:40%;
   left: 35%;
    height: 20%;
    width: 30%;
}

<div id="box">
<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>
</div>