css - 绝对定位拆分标题和描述

Question

在本页面：

https://www.joshungerdesign.com/packed

我有一个 3 图像马赛克设置。我希望标题位于每张图片的顶部，而描述位于每张图片的底部。有没有办法通过编写 css 来同时处理高图像和短图像来实现这一点？

我尝试了以下方法：

.Index-gallery-item-content-heading {
   position: absolute;
   bottom: 190px;
}

这为小图像提供了所需的结果，但不适用于高图像。我希望所有图像看起来都像较短的图像，标题在顶部，描述在底部。

标签： csscss-position

Answer 1

不推荐使用“幻数”，因此尽可能避免使用特定的像素值。使用 ems、% 和 vw/vh 是响应式设计的必要条件。

但是在这种情况下，您可以只使用top: 0;在顶部bottom: 0;浮动一个绝对元素并在底部浮动一个绝对元素（只要父position:relative;级当然是）

.Index-gallery-item-content-heading,
.Index-gallery-item-content-description {
  position: absolute;
}

.Index-gallery-item-content-heading {
  top: 0;
}

.Index-gallery-item-content-description {
  bottom: 0;
}