html - 基于内容问题的高度相对定位

Question

你好，我正在努力实现这个

所以在这种情况下，您可以看到，我们有 3 个 div。顶部的宽度为 100%，高度为自动。当然也会相对定位。

第二个相同，但在这种情况下，我将添加一个虚拟文本来定义 div 的高度。

第三个和第一个一样，问题是，他们没有结盟。没有一个在另一个之前。有人能告诉我我的代码有什么问题吗？谢谢

#block1 {
  position:relative;
  width:100%;
  height:auto;
  background-color: blue;
}

#img1 {
  width:100px;
  height:100px;
  position:absolute;
  left:50%;
  transform:translate(-50%);
  -webkit-transform:translate(-50%);
}

#block2 {
  position:relative;
  width:100%;
  height:auto;
  background-color: orange;
}

.dummytext {
  font-family: 'Ralleway, sans-serif';
  font-size: 20px;
  text-align: justify;
  margin:10px;
}

#block3 {
  position:relative;
  width:100%;
  height:auto;
  background-color: brown;
}

#img2 {
  width:100px;
  height:90px;
  position:absolute;
  left:50%;
  transform:translate(-50%);
  -webkit-transform:translate(-50%);
}

<div id="block1">
  <img src="images/img1.png" id="img1"/>
</div>

<div id="block2">
  <h3 class="dummytext">Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, </h3>
</div>

<div id="block3">
  <img id="img2" src="images/img2.png"/>
</div>

谁能帮我理解一下？

Answer 1

这是因为您的图像绝对定位，不会影响容器的大小。您应该删除图像的绝对位置。

试试这个:

div {
  text-align: center; /* center everything inside the divs */
}
#block1 {
  width: 100%;
  height: auto;
  background-color: blue;
}
#img1 {
  width: 100px;
  height: 100px;
}
#block2 {
  width: 100%;
  height: auto;
  background-color: orange;
}
.dummytext {
  font-family: 'Ralleway, sans-serif';
  font-size: 20px;
  text-align: justify;
  margin: 10px;
}
#block3 {
  width: 100%;
  height: auto;
  background-color: brown;
}
#img2 {
  width: 100px;
  height: 90px;
}

<div id="block1">
  <img src="images/img1.png" id="img1" />
</div>

<div id="block2">
  <h3 class="dummytext">Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, Text Example, </h3>
</div>

<div id="block3">
  <img id="img2" src="images/img2.png" />
</div>