CSS中的四象限

用这把小提琴，我得到了四个象限

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>

但是：

当div很好时，为什么这四个段落会捆绑在一起

有没有办法通过在一个地方指定40/60和35/65分区来避免重复

编辑： 如果您能指出我在理解CSS工作原理时的错误，我将不胜感激。答案很好，但告诉我哪里错了更有用。

1。）因为您设置了

位置：固定适用于所有四个div。这将在视口/窗口的左上角（在您的示例中）修复它们。把它擦掉

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

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

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

.x{
身高：40%；
宽度：65%；
}
... 
1.）因为您设置了
位置：固定适用于所有四个div。这将在视口/窗口的左上角（在您的示例中）修复它们。把它擦掉

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

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

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

.x{
身高：40%；
宽度：65%；
}
... 
您可以尝试以下方法：


.wrapper{
位置：固定；
显示：块；
宽度：100%；
身高：100%；
}
#一、二、三、四{
边框：1px红色虚线；
框大小：边框框；
浮动：左；
}
#一个{
身高：40%；
宽度：35%；
}
#两个{
身高：40%；
宽度：65%；
}
#三{
身高：60%；
宽度：35%；
}
#四{
身高：60%；
宽度：65%；
}

一个

两个

三

四

您可以尝试以下方法：


.wrapper{
位置：固定；
显示：块；
宽度：100%；
身高：100%；
}
#一、二、三、四{
边框：1px红色虚线；
框大小：边框框；
浮动：左；
}
#一个{
身高：40%；
宽度：35%；
}
#两个{
身高：40%；
宽度：65%；
}
#三{
身高：60%；
宽度：35%；
}
#四{
身高：60%；
宽度：65%；
}

一个

两个

三

四

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


正文{
高度：300px；
}
div{
边框：1px红色虚线；
浮动：左；
}
#一，二{
身高：40%；
边框底部：无
}
#三，四{
身高：20%；
}
#一，三{
宽度：35%；
}
#二，四{
宽度：30%；
左边界：无；
}
一个

两个

三

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


正文{
高度：300px；
}
div{
边框：1px红色虚线；
浮动：左；
}
#一，二{
身高：40%；
边框底部：无
}
#三，四{
身高：20%；
}
#一，三{
宽度：35%；
}
#二，四{
宽度：30%；
左边界：无；
}
一个

两个

三

四个
我认为这是可行的


正文{
保证金：0；
}
div{
位置：固定；
边框：1px红色虚线；
}
#盒子{
身高：60%；
宽度：65%；
}
#一个{
身高：40%；
宽度：35%；
}
#两个{
身高：40%；
左：35%；
宽度：30%；
}
#三{
最高：40%；
身高：20%；
宽度：35%；
}
#四{
最高：40%；
左：35%；
身高：20%；
宽度：30%；
}

一个

两个

三

四

我认为这是可行的


正文{
保证金：0；
}
div{
位置：固定；
边框：1px红色虚线；
}
#盒子{
身高：60%；
宽度：65%；
}
#一个{
身高：40%；
宽度：35%；
}
#两个{
身高：40%；
左：35%；
宽度：30%；
}
#三{
最高：40%；
身高：20%；
宽度：35%；
}
#四{
最高：40%；
左：35%；
身高：20%；
宽度：30%；
}

一个

两个

三

四

你的
div
s实际上不好。更改边框的大小和颜色可能会使其更清晰，如下面的示例所示


div{
位置：固定；
}
#一个{
边框：2个蓝色虚线；
身高：40%；
宽度：35%；
}
#两个{
边框：1px纯红；
身高：40%；
宽度：65%；
}
#三{
边框：2个绿色虚线；
身高：60%；
宽度：35%；
}
#四{
边框：2件纯黑；
身高：60%；
宽度：65%；
}
一个

两个

三

四个
你的
div实际上不好。更改边框的大小和颜色可能会使其更清晰，如下面的示例所示


div{
位置：固定；
}
#一个{
边框：2个蓝色虚线；
身高：40%；
宽度：35%；
}
#两个{
边框：1px纯红；
身高：40%；
宽度：65%；
}
#三{
边框：2个绿色虚线；
身高：60%；
宽度：35%；
}
#四{
边框：2件纯黑；
身高：60%；
宽度：65%；
}
一个

两个

三

四个
Hmm。。你的答案是获得肯定的选票，但这不起作用：你仍然有
position:fixed
。你所看到的是所有这些DIV相互叠加@卡拉夫-是的，它不起作用。看我的答案，忽略投票。如果您只是按照建议删除
position:fixed
，您将失去所有比例。这需要固定。没有固定的位置，高度只会和内容一样大，因此实际上不是一个固定的位置grid@Johannes，我认为问题是答案实际上似乎不起作用。它可以帮助您和其他人使用代码片段或类似于JSFIDLE的东西来展示一个完全工作的示例。如果你是对的，你可以证明。如果你错了，你可以改正。嗯。。你的答案是获得肯定的选票，但这不起作用：你仍然有
position:fixed
。你所看到的是所有这些DIV相互叠加@卡拉夫-是的，它不起作用。看我的答案，忽略投票。如果您只是按照建议删除
position:fixed
，您将失去所有比例。这需要固定。没有固定的位置，高度只会和内容一样大，因此实际上不是一个固定的位置grid@Johannes，我认为问题在于答案并不正确