gpt4 book ai didi

css - 4 列 flex css,左上角框跨越 2 列。如何?

转载 作者:行者123 更新时间:2023-11-28 19:08:52 27 4
gpt4 key购买 nike

我正在尝试制作一个 flex (基于 em)的 CSS 布局,其中包含四列和一个横跨左上角两列的框。四列的宽度相同(比如 20em,边距为 1em),左上角的框高度可变。

没有必要让四列的高度相同。

我想远离 CSS 框架和基于 gasp 表的布局。

我正在考虑这样的 HTML 结构:

<box></box>  
<column1></column1>
<column2></column2>
<column3></column3>
<column4></column4>

最佳答案

<html>
<head>
<style>
#outer, #left, #right, #top_left, #bottom_left,
#bottom_left_left, #bottom_left_right, #right_left, #right_right {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
}
#outer {position:relative;}
#left {right:50%;}
#top_left {position:relative;}
#bottom_left {position:relative;}
#bottom_left_left {right:50%;}
#bottom_left_right {left:50%;}
#right {left:50%;}
#right_left {right:50%;}
#right_right {left:50%;}
</style>
</head>
<body>
<div id="outer">
<div id="left">
<div id="top_left">Top left</div>
<div id="bottom_left">
<div id="bottom_left_left">Bottom left</div>
<div id="bottom_left_right">Bottom right</div>
</div>
</div>
<div id="right">
<div id="right_left">Near Right</div>
<div id="right_right">Far Right</div>
</div>
</div>
</body>
</html>

关于css - 4 列 flex css,左上角框跨越 2 列。如何?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1894884/

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