gpt4 book ai didi

html/css 将屏幕分成 4 个象限

转载 作者:搜寻专家 更新时间:2023-10-31 22:03:46 26 4
gpt4 key购买 nike

我想制作如下图所示的网页划分布局:

我一直在尝试使用表格标签,但我需要使用整个屏幕(100% 宽度和高度),我宁愿使用更现代的标签,因为我将不得不在其中一个中使用 Canvas 无论如何分割。

layout

最佳答案

像这样? http://jsfiddle.net/NmjfE/

HTML:

<div class="tl"></div>
<div class="tr"></div>
<div class="bl"></div>
<div class="br"></div>

CSS:

.tl { position: absolute; top: 0; left: 0; right: 30%; bottom: 30%; 
background: red; border:solid #000; border-width: 0 10px 10px 0; }
.tr { position: absolute; top: 0; left: 70%; right: 0; bottom: 30%;
background: blue; border:solid #000; border-width: 0 0 10px 0; }
.bl { position: absolute; top: 70%; left: 0; right: 30%; bottom: 0;
background: yellow; border:solid #000; border-width: 0 10px 0 0; }
.br { position: absolute; top: 70%; left: 70%; right: 0; bottom: 0;
background: green; }

关于html/css 将屏幕分成 4 个象限,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8101004/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com