我想将一个网页分成 4 个相等的象限。这些象限应填满整个页面,并根据窗口大小折叠。象限需要填满窗口的整个视口(viewport)。
我可以使用 vh 和 vw 并让它工作,但我知道它的支持相当不稳定。
理想情况下,任何解决方案都适用于 bootstrap.css 但不是必需的。
非常感谢
最佳答案
只需使用 width: 50%
和 height: 50%
4 次,然后添加 left: 50%
和 top: 50 %
与 position: absolute;
:
div {
height: 50%;
width: 50%;
position: absolute;
top: 0%;
left: 0%;
background: blue;
}
#or {
left: 50%;
background: lime;
}
#ul {
top: 50%;
background: red;
}
#ur {
top: 50%;
left: 50%;
background: yellow;
}
<div id="ol"></div>
<div id="or"></div>
<div id="ul"></div>
<div id="ur"></div>
关于css - 将页面分成象限,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33433050/