如何实现点击Read More时下方页面内容自动下移

嘿，我看到你遇到的问题了——点击"Show more"后额外文本和下方段落重叠，这大概率是因为你用了<span>作为展开内容的容器，而行内元素的max-height属性没法正确控制高度变化，导致父元素的高度没有随着内容展开而增加，下方内容自然就不会下移啦。

下面是具体的修复方案，我会一步步说明：

核心修改点 #

1. 把展开内容的容器改成块级元素：行内元素（比如<span>）的max-height不生效，换成<div>或者给原<span>加display:block，这样高度变化才能被正确计算。
2. 给父容器添加overflow:hidden：确保父元素的高度会随着子元素的展开/收缩而变化，避免内容溢出。
3. 优化过渡属性：移除font-size的过渡（容易导致布局跳动），只保留max-height和opacity的过渡，让动画更平滑。

修改后的完整代码 #

CSS部分 #

.read-more-state { 
  display: none; 
}

.read-more-target {
  opacity: 0;
  max-height: 0;
  /* 改成块级元素 */
  display: block;
  transition: max-height 0.25s ease, opacity 0.25s ease;
  /* 去掉font-size的设置，避免布局跳动 */
}

.read-more-state:checked~.read-more-wrap .read-more-target {
  opacity: 1;
  max-height: 999em;
}

.read-more-state~.read-more-trigger:before { 
  content: 'Show more'; 
}

.read-more-state:checked~.read-more-trigger:before { 
  content: 'Show less'; 
}

.read-more-trigger {
  cursor: pointer;
  display: inline-block;
  padding: 0 .5em;
  color: #666;
  font-size: .9em;
  line-height: 2;
  border: 1px solid rgba(0, 162, 38, 0.55);
  border-radius: .25em;
  /* 给按钮加个margin，和下方内容拉开距离 */
  margin-top: 10px;
}

/* 给父容器添加overflow:hidden */
.read-more-wrap {
  overflow: hidden;
}

HTML部分（只修改展开内容的容器） #

<div class="cultureHist"></div>
<div class="descriptionText">
 <h4>历史底蕴深厚之地</h4><br><br>
 <input type="checkbox" class="read-more-state" id="histAbounds">
 <p class="read-more-wrap" style="text-align: left">蒂肖明戈县曾是美国南部的“婚姻之都”，无数情侣来到旧蒂肖明戈县法院“喜结连理”，因为这里的结婚证申领要求极为简便。蒂肖明戈县拥有极其丰富的历史与文化故事，包括历史宅邸、伊uka战役及其他南北战争小冲突。<div class="read-more-target">如果你是历史爱好者，一定想参观我们的历史公墓、博物馆、宏伟的老建筑和历史地标，这些载体承载着浪漫情怀，让往昔时代的记忆得以延续。本页面呈现的资源只是我们丰富历史的冰山一角，不仅能展现多元文化在此汇聚的缘由，还能体现他们如何改变世界。</div></p>
 <label for="histAbounds" class="read-more-trigger"></label>
</div>
</div>
</div>
<div data-aos="fade-zoom-in" data-aos-offset="0" data-aos-delay="300" data-aos-duration="1000">
 <div class="animationContainer">
 <div class="retirement"></div>
 <div class="descriptionText">
 <h4>理想退休之地</h4><br><br>蒂肖明戈县是最佳退休地点之一。据Kiplinger报道，密西西比州在对退休人员最友好的税收州中排名第4。退休人员无需为退休收入缴纳所得税，社会保障收入无论总收入多少均免税。</div>
 </div>
</div>

为什么这样改？ #

• 块级元素的max-height能正确影响元素的高度，当展开时，父容器.read-more-wrap的高度会自动扩展，自然就会把下方的"理想退休之地"段落往下推，不会再重叠。
• overflow:hidden确保父容器不会因为子元素的高度变化而出现内容溢出的情况，同时让max-height的过渡动画正常工作。
• 移除font-size的过渡是因为字体大小变化会导致布局跳动，只用max-height和opacity就能实现平滑的显示/隐藏效果。

你可以直接把这些修改应用到你的代码里，应该就能解决重叠问题啦！

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