如何使用HTML与CSS在页脚Footer的左右角落添加logo

解决方案 #

使用Flex布局可以最简单稳定地实现你要的页脚布局效果，修改后的代码如下：

修改后HTML代码 #

<div class="footer">
  <!-- 左侧赞助logo，后续直接替换src属性即可更新图片 -->
  <img src="hp-omen-logo.png" id="footer-left" alt="Sponsored by HP omen gaming">
  <!-- 中间导航区域 -->
  <div class="footer-content">
    <div class="footer-title">WBHS ESPORTS</div>
    <ul>
      <li><a href=" " target="_blank">Facebook</a></li>
      <li>|</li>
      <li><a href=" " target="_blank">YouTube</a></li>
      <li>|</li>
      <li><a href=" " target="_blank">Twitch</a></li>
    </ul>
  </div>
  <!-- 右侧logo，替换src即可修改 -->
  <img src="你的右侧logo地址.png" id="footer-right" alt="右侧logo">
</div>

修改后CSS代码 #

.footer {
  background-color: #035642;
  margin-top: 10px;
  min-height: 60px;
  color: #efe5d0;
  padding: 15px 20px;
  font-size: 100%;
  font-family: Arial;
  /* 开启flex横向布局 */
  display: flex;
  /* 子元素分别左对齐、居中、右对齐排列 */
  justify-content: space-between;
  /* 所有子元素垂直居中 */
  align-items: center;
}

.footer-content {
  text-align: center;
}

.footer-title {
  font-weight: bold;
  margin-bottom: 8px;
}

.footer ul {
  padding: 0;
  list-style-type: none;
  margin: 0;
}

.footer ul li {
  display: inline-block;
  font-weight: bold;
}

.footer ul li a {
  text-decoration: none;
  padding: .2em 1em;
  color: #efe5d0;
  background-color: #5c755e;
  font-weight: bold;
}

.footer ul li a:hover {
  color: #000;
  background-color: #fff;
}

#footer-left, #footer-right {
  height: 50px;
  width: auto;
}

核心修改说明 #

• 移除了原代码中position: fixed+float的冲突写法，fixed定位是相对于浏览器窗口而非父容器页脚，完全不符合当前需求
• 给页脚开启Flex布局，仅用两行属性就实现了三部分元素的横向排列对齐，比float逻辑更简单，不会出现高度塌陷、元素错位的问题
• 修正了原HTML的语法错误：li标签不能直接作为div的子元素，必须包裹在ul/ol标签内，因此将原单独的WBHS ESPORTS文本改成了独立的标题块
• 左右两侧logo直接通过Flex布局贴到页脚左右角落，后续只需替换img标签的src属性就能更新logo内容

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