Question

强文

.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个单独的盒子）。如何解决它：

我想要的：

Answer 1

如果我了解您的问题，那么您需要display: table-cell .box和float: left .inside的组合使用{/ 1}}：

.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/]

使相对div具有内容大小

1 个答案: