Question

从我的观点来看， fitsImageRight 和 text 是两个相对定位的容器，为什么文本忽略了 fitsImageRight 的高度容器

我想加载不同的图像，裁剪并居中，并且下面的文字可以适应图像的高度。

我是新手，所以我将不胜感激。

.text {
  font-size: 15px;
}

.containerRight {
  position: relative;
  width: 900px;
  height: 800px;
  border: 1px solid #000000;
}


.fittedImageRight {
  position: relative;
  width: 900px;
  height: 100px;
  float: left;
}

.fittedImageRight img {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 100%;
  width: auto;
  -webkit-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}

.fittedImageRight img.portrait {
  width: 100%;
  height: auto;
}

<div class="containerRight">
  <div class="fittedImageRight"><img class="portrait" src="A.png"></div>
  <div class="font text">
    Lorem ipsum dolor sit amet,...</div>
</div>

谢谢！

Answer 1

如果你想只在图像下面的文字，你不需要漂浮任何东西。如果你浮动div，它会将其从页面流中取出，这就是为什么它不能识别容器的高度。此外，如果您希望图像容器调整到图像的高度，则需要移除高度或将其设置为自动。

CSS：相对对象中的绝对对象，忽略容器流

1 个答案: