hover交互下标题与多行描述重叠问题：求布局修复方案

我懂你遇到的这个麻烦——单行描述时标题上移的位置刚刚好，但一旦描述变成多行，就会和标题叠在一起，甚至标题可能跑到块的顶部去，完全不是预期的样子。其实问题根源在于你给标题设置了固定的bottom值（35px），这个数值只适配单行文本的高度，多行时自然就撑不住了。

咱们换个思路，把标题和描述放到同一个容器里，让它们垂直排列，利用容器的自适应高度来控制位置，这样不管描述是几行，标题都会牢牢贴在描述上方，再也不会重叠。

修改后的实现方案 #

首先调整HTML结构，把标题和描述包裹在一个统一的容器里（比如命名为.trend-caption）：

<div class="trend-block">
  <img src="你的图片地址" class="trend-image" alt="图片描述">
  <div class="trend-caption">
    <h3 class="trend-title transition-title">示例标题</h3>
    <p class="trend-text">这是一段多行的描述文本，用来测试换行后的显示效果，确保标题不会和文本重叠。</p>
  </div>
</div>

然后修改CSS代码，核心是让容器绝对定位在底部，hover时显示描述，通过flex布局让标题和文本垂直排列，同时利用容器内边距的变化实现标题上移的平滑效果：

.trend-block {
  position: relative;
  width: 150px;
  height: 150px;
  overflow: hidden; /* 防止内容溢出容器 */
}

.trend-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例，避免拉伸变形 */
}

.trend-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 0 15px 15px; /* 默认只在底部留内边距 */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* 文本左对齐 */
  transition: padding 0.3s ease; /* 平滑过渡内边距变化 */
}

.trend-title {
  font-weight: bold;
  color: red;
  margin: 0;
}

.trend-text {
  color: red;
  display: none;
  margin: 8px 0 0; /* 标题和描述之间留固定间距 */
}

/* hover状态下的样式 */
.trend-block:hover .trend-caption {
  padding-bottom: 40px; /* 增加底部内边距，实现整体上移的效果 */
}

.trend-block:hover .trend-text {
  display: block; /* 显示描述文本 */
}

为什么这样改能解决问题？ #

• 标题和描述在同一个容器里，容器高度会根据描述的行数自动撑开，标题始终位于描述上方，彻底避免重叠。
• 用容器的padding-bottom变化代替标题的固定bottom值，不管描述是几行，整体上移的效果都是统一的，不会出现标题跑过头的情况。
• 用flex布局控制垂直排列，确保元素的位置关系始终稳定可靠。

你可以根据自己的需求调整padding-bottom的数值，控制hover时整体上移的距离，或者修改margin来调整标题和描述之间的间距。

内容的提问来源于stack exchange，提问作者Lars