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

Question

您好我正在尝试实现此

所以在这种情况下你可以看到，我们有3个div。顶部的宽度为100％，高度为auto。当然也是相对定位的。

第二个相同，但在这种情况下，我将添加一个虚拟文本，用于定义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

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

试试这个：

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

要控制div的布局，您应该为它们提供显示属性。尝试添加display：table-row;对于每个块

Answer 3

您无需使用绝对定位来完成此任务。使用margin: 0 auto这样的默认静态定位和居中内容更容易（也更安全），如下所示：

#block1 {
width:100%;
background-color: blue;
}

#img1 {
height: 100px;
width: 100px;
margin: 0 auto;
}

#block2 {
width:100%;
background-color: orange;
}

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

#block3 {
width:100%;
background-color: brown;
}

#img2 {
width:100px;
height:90px;
margin 0 auto;
}

这是实现所需布局的最标准解决方案。

Answer 4

由于已在其上设置了属性position，因此您的元素无法显示。 要使其工作，请在table标记周围添加img元素，并在其上设置margin: auto属性。

＆＃13;

＆＃13;

#block1 {
  width: 100%;
  height: auto;
  background-color: blue;
}
#img1 {
  width: 100px;
  height: 100px;
  left: 50%;
  transform: translate(-50%);
  -webkit-transform: translate(-50%);
}
#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;
  left: 50%;
  transform: translate(-50%);
  -webkit-transform: translate(-50%);
}
table {
  margin: auto;
}

＆＃13;

<div id="block1">
  <table>
    <tbody>
      <tr>
        <td>
          <img id="img1" src="images/img1.png"></td></tr></tbody><table>
</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">
  <table>
    <tbody>
      <tr>
        <td>
          <img id="img2" src="images/img2.png"></td></tr></tbody><table>
</div>

＆＃13;

＆＃13;

＆＃13;