将 div 直接放置在高度未知的图像下方，位置为绝对/相对

Question

我有一个占视口宽度 88% 的图像，因此它的高度是动态的。我需要将我的 .pricecontainermobile div 直接放置在图像下方，这样无论视口如何，它都会直接位于图像下方...我尝试通过位置：绝对/相对进行设置，但我无法让它工作，因为我需要我的图像垂直居中（负46px）...我相信这扰乱了绝对/相对...我哪里出错了？注意这仅适用于纵向...请查看此方向的代码以查看正确的样式等。JSFiddle： https: //jsfiddle.net/cz9hebg7/1/代码：<div id="placement">      <img src="images/" alt="."/>      <div class="pricecontainermobile">        <h1>TEST</h1>        <h2>$ 30.00</h2>      </div>    </div>.pricecontainermobile>h2 {  text-align: center;  font-size: 12px;}.pricecontainermobile>h1 {  display: block;  font-family: neue-haas-grotesk-text, sans-serif;  color: white;  font-weight: 500;  font-style: normal;  list-style: none;  text-align: center;  text-decoration: none;  font-size: 13px;  top: 0;}.pricecontainermobile {  display: block;  width: 100%;  background: blue;  position: absolute;}#placement {    display: block;    position: fixed;    left: 0;    right: 0;    top: 0;    bottom: 0;    height: 100%;    width: 88%;    margin-left: 6%;    background: red;}#placement img {            width: 100%;    height: auto;    position: relative;    top: calc(50% - 46px);    transform: translateY(-50%); }

Answer 1

如果 .pricecontainermobile 块的高度是固定的，您可以将其与 img 一起放入容器中，然后将容器放置在 #placement 中，而不是 img 中。

所以我将h1和h2的高度固定为18px；如果你愿意的话你可以改变它。另请注意，我为 img 使用了占位符图像。

.pricecontainermobile>h2 {

  text-align: center;

  font-size: 12px;

  line-height: 24px; /* new: fix height */

  margin: 0;

}

.pricecontainermobile>h1 {

  font-family: 'neue-haas-grotesk-text', sans-serif;

  color: white;

  font-weight: 500;

  font-style: normal;

  list-style: none;

  text-align: center;

  text-decoration: none;

  font-size: 13px;

  line-height: 24px; /* new: fix height */

  margin: 0;

}

.pricecontainermobile {

  display: block;

  width: 100%;

  background: blue;

  position: absolute;

  padding: 6px 0; /* new: correct header's margins */

}

#placement {

  display: block;

  position: fixed;

  left: 0;

  right: 0;

  top: 0;

  bottom: 0;

  height: 100%;

  width: 88%;

  margin-left: 6%;

  background: red;

}

#placement .imgcontainer { /* new: moved from img */

  position: relative;

  top: calc(50% - 30px); /* corrected for height of header */

  transform: translateY(-50%);

}

#placement img {

  vertical-align:top;

  width: 100%;

  height: auto;

}

<div id="placement">

  <div class="imgcontainer">

    <img src="https://placehold.it/600x200" alt="." />

    <div class="pricecontainermobile">

      <h1>TEST</h1>

      <h2>$ 30.00</h2>

    </div>

  </div>

</div>