gpt4 book ai didi

html - 使相对div具有内容大小

转载 作者:太空宇宙 更新时间:2023-11-04 10:12:15 26 4
gpt4 key购买 nike

强文本

.inside{
position: absolute;
background-color:red;
top:0px;
left:0px;
width:200px;
height: 200px;
}
.inside2{
height: 210px;
background-color: blue;
}
.inside3{
height: 220px;
background-color: black;
}
.box {
position: relative;
}
<html>

<body>
<div class="box">
<div class="inside"></div>
<div class="inside"></div>
</div>
<div class="box">
<div class="inside inside2"></div>
<div class="inside inside2"></div>
</div>
<div class="box">
<div class="inside inside3"></div>
<div class="inside inside3"></div>
</div>
</body>

</html>

所以我有 2 个重叠的 div(内部类),它的大小是不固定的(可能是 200px 或 210px ...)。我已经使用 positive: absolute 使其重叠并将框设置为相对的。盒子的问题是它的高度为 0px,所以这些盒子只是重叠在相同的位置(而不是 3 个单独的盒子)。如何解决:

enter image description here

我想要什么: enter image description here

最佳答案

如果我理解你的问题,那么你需要结合使用 display: table-cell for .boxfloat: left对于 .inside:

.inside{ width:50px; float: left; }
.inside1 { height: 220px; background-color: red; }
.inside2 { height: 210px; background-color: blue; }
.inside3 { height: 200px; background-color: black;}
.box { position: relative; display: table-cell; border: 1px solid red; }

<div class="box">
<div class="inside inside1"></div>
<div class="inside inside2"></div>
<div class="inside inside3"></div>
</div>

[ https://jsfiddle.net/2akhf3fo/ ]

关于html - 使相对div具有内容大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37511656/

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