强文本
.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 个单独的盒子)。如何解决:
我想要什么:
最佳答案
如果我理解你的问题，那么你需要结合使用 display: table-cell for .box 和 float: 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>
关于html - 使相对div具有内容大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37511656/