求助：如何将网页Footer分为一行三列（附代码）

嘿，作为前端新手遇到布局问题太正常啦！我帮你搞定这个footer的三列布局，用现在最常用也最简单的Flexbox就能轻松实现，下面一步步来：

问题分析 #

你现在的footer里的三个区块（版权、社交图标、联系方式）默认是块级元素，会自动上下堆叠，所以没法横向排列。我们只需要给footer开启Flex布局，就能让它们横向排列，再调整对齐方式就行。

修改后的完整代码 #

CSS部分（style.css）

body{ margin: 0; border: 0; padding: 0; }
/* Slideshow */
.section1{ background: url(files/home-slideshow-001.jpeg); height: 90vh; background-size: cover; }
#overlay{ font-family: Oswald; text-transform: uppercase; font-size: 3vw; font-weight: 700; position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: center; }
/* End Slideshow */
/* Footer */
footer{ 
  background: #111111; 
  height: 10vh; 
  display: flex; /* 开启Flex布局，让子元素横向排列 */
  align-items: center; /* 让内容在垂直方向居中 */
  justify-content: space-between; /* 水平方向分散对齐：左、中、右各占一端 */
  padding: 0 20px; /* 加左右内边距，避免内容贴在页面边缘 */
}
.copyright, p{ color: whitesmoke; text-align: left; } /* 版权内容左对齐 */
.brands{ color: whitesmoke; text-align: center; } /* 社交图标居中 */
.contact{ color: whitesmoke; text-align: right; } /* 联系方式右对齐 */
a{ text-decoration: none; color: whitesmoke; }
/* 修复列表样式，去掉默认的列表符号 */
.contact ul{ list-style: none; padding: 0; margin: 0; }
/* End Footer */

HTML部分

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Home - Motive Media Productions</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Oswald:500,600,700" rel="stylesheet">
</head>
<body>
<div class="section1">
  <div id="overlay">
    <h1>Text</h1>
  </div>
</div>

<footer>
  <div class="copyright">
    <p>&copy; 2018</p>
  </div>
  <div class="brands">
    <div class="social-media">
      <a href="http://www.facebook.com/" target="_blank">
        <img src="files/facebook.png"></a>
      <a href="http://www.instagram.com/" target="_blank">
        <img src="files/instagram.png"></a>
      <a href="http://www.twitter.com/" target="_blank">
        <img src="files/twitter.png"></a>
    </div>
  </div>
  <div class="contact">
    <!-- 修复语义：li必须放在ul/ol里面 -->
    <ul>
      <li class="contact-list">
        <a href="tel:00">00</a>
      </li>
      <li class="contact-list">
        <a href="mailto:hi@hi.com">hi@hi.com</a>
      </li>
    </ul>
  </div>
</footer>
</body>
</html>

关键修改说明（新手必看） #

1. 开启Flex布局：给footer添加display: flex，这是核心！它会让footer里的三个子div从上下堆叠变成横向排列。
2. 垂直居中：align-items: center - 因为footer有固定高度（10vh），这个属性能让里面的内容垂直居中，不会歪歪扭扭。
3. 水平分散对齐：justify-content: space-between - 这个属性会让三个区块分别靠页面左侧、中间、右侧，自动分配它们之间的空白空间，完美符合你的需求。
4. 内容对齐调整：给每个区块设置text-align，确保区块内部的文字/图标对齐方向正确。
5. 修复HTML语义错误：原来的<li>没有包裹在<ul>里，这不符合HTML规范，我帮你补上了，还去掉了列表默认的圆点样式。

额外小提示 #

• 如果你想让三个区块宽度均等，可以给每个子div添加flex: 1，这样它们会平分footer的宽度。
• Flexbox是前端布局的必备技能，记住这几个核心属性，大部分简单布局都能搞定！

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