<hr>无法在三栏文本下方完全对齐的问题求助

首先先修正你代码里的语法错误：<hr class="divider2>" 里的引号位置写错了，应该改成 <hr class="divider2">，否则CSS选择器无法正确识别这个类。

接下来针对布局问题，分两种方案解决：

方案1：修复浮动布局（如果坚持用float） #

如果你的.column是用float: left实现的三栏，.row容器会因为子元素浮动而高度塌陷，导致内部的<hr>无法正常占据整行宽度。需要给.row添加清除浮动的样式：

修正后的HTML #

<hr class="divider1">
<div class="row clearfix">
  <div class="column left">
    <h2>Lorem, ipsum dolor.?</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. In ex id ad voluptas corporis eveniet sunt veniam? Reprehenderit delectus est fuga obcaecati molestiae? Sapiente nobis blanditiis,iusto pariatur exercitationem officia?</p>
  </div>
  <div class="column middle">
    <h2>Lorem, ipsum dolor.</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus eius ipsa dolorem animi eligendi rem.</p>
  </div>
  <div class="column right">
    <h2>Lorem, ipsum dolor.</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, dolores! Alias nisi totam asperiores quos.</p>
  </div>
  <hr class="divider2">
</div>

对应的CSS #

.column {
  float: left;
  width: 33.33%; /* 根据需求调整宽度 */
  box-sizing: border-box; /* 避免padding撑宽容器 */
}

/* 清除浮动的clearfix类 */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

.divider2 {
  width: 100%; /* 确保hr撑满宽度 */
  margin: 20px 0; /* 调整上下间距 */
}

方案2：改用Flex布局（推荐，更简洁） #

Flex布局是现代前端的标准布局方式，不会有浮动带来的塌陷问题，代码更易维护：

修正后的HTML #

<hr class="divider1">
<div class="row">
  <div class="column left">
    <h2>Lorem, ipsum dolor.?</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. In ex id ad voluptas corporis eveniet sunt veniam? Reprehenderit delectus est fuga obcaecati molestiae? Sapiente nobis blanditiis,iusto pariatur exercitationem officia?</p>
  </div>
  <div class="column middle">
    <h2>Lorem, ipsum dolor.</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus eius ipsa dolorem animi eligendi rem.</p>
  </div>
  <div class="column right">
    <h2>Lorem, ipsum dolor.</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, dolores! Alias nisi totam asperiores quos.</p>
  </div>
  <hr class="divider2">
</div>

对应的CSS #

.row {
  display: flex;
  gap: 20px; /* 栏与栏之间的间距，可调整 */
}

.column {
  flex: 1; /* 三栏平分宽度 */
  box-sizing: border-box;
}

.divider2 {
  width: 100%;
  margin: 20px 0;
  flex-shrink: 0; /* 防止hr被压缩 */
}

两种方案都能解决你的问题，推荐用Flex布局，更符合现代前端开发的趋势，也避免了浮动带来的各种兼容性问题。

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