如何正确对齐页面信息并修复网站页脚内容排版错位问题

问题根因 #

• HTML结构错误：分隔线<hr>和版权文本被嵌套在Quick Links对应的列容器内，导致分隔线仅展示在第二列下方
• 列布局缺少对应样式：你给列加的footer column 1是三个独立类名，没有指定宽度和布局规则，也没有给行容器配置flex布局，导致两列无法按预期平分宽度
• 页脚固定高度height:400px限制了内容自适应，容易出现内容溢出或错位

修改后的HTML代码 #

<!-- Site footer -->
<footer class="site-footer">
  <div class="container">
    <!-- 两个内容列所在行 -->
    <div class="row footer-content-row">
      <div class="footer-column footer-column-1">
        <h6>About</h6>
        <p class="text-justify">Construction estimation is agreat company lol Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus consectetur recusandae perspiciatis repellendus iure vero error dignissimos officiis atque est libero neque soluta eum vel autem dolores, adipisci voluptatum quibusdam.</p>
      </div>
      <div class="footer-column footer-column-2">
        <h6>Quick Links</h6>
        <ul class="footer-links">
          <li><a href="/index.html">Home Page</a></li>
          <li><a href="/about.html">About Us</a></li>
          <li><a href="/contact.html">Contact Us</a></li>
        </ul>
      </div>
    </div>
    <!-- 分隔线和版权内容提出来，和内容行平级 -->
    <hr>
    <p class="copyright-text">Copyright &copy; 2021 All Rights Reserved by
    <a href="/index.html">Construction Estimation</a>
    </p>
  </div>
</footer>

新增/调整的CSS代码 #

/* 新增row的flex布局 */
.footer-content-row {
  display: flex;
  gap: 40px;
  margin-bottom: 30px;
}
/* 新增列的宽度规则 */
.footer-column {
  flex: 1;
}
/* 调整页脚高度为自适应，去掉固定高度限制 */
.site-footer {
  height: auto;
}
/* 版权文本对齐调整 */
.copyright-text {
  text-align: center;
  margin: 20px 0 0;
}

修改说明 #

1. 调整HTML结构，把分隔线和版权内容从第二列中移出，和内容行平级，自然就会横跨两个板块下方
2. 给内容行加flex布局，两个列设置flex:1自动平分宽度，不会出现内容挤在一侧的问题
3. 去掉页脚固定高度，改成自适应，避免内容高度变化时出现错位
4. Quick Links的列表本身已经设置了padding-left:0，列宽度正常后链接自然就会左对齐

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