网站3列布局页脚添加5个社交媒体按钮的布局适配求助

要在不破坏现有3列布局的前提下，将5个社交媒体按钮紧凑排列在「CONTACT ME」下方，只需对HTML结构和CSS做少量调整：

核心思路 #

将所有社交媒体按钮包裹在一个单独的容器中，让这个容器作为第三列的一个网格项，紧跟在「CONTACT ME」链接之后，这样就不会打乱原有网格的列结构。同时用Flexbox让容器内的按钮紧凑排列。

修改后的代码 #

HTML代码

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<footer>
  <div id="ex1" style="text-align: left;">
    <img src="/footerlogo.png" width="120px" height="100px">
    <div class="two-column-layout">
      <a style="margin-bottom: 5px;" href="index.html">HOME</a>
      <a href="discography.html">DISCOGRAPHY</a>
      <a href="contact-me.html">CONTACT ME</a>
      <!-- 新增社交媒体容器 -->
      <div class="social-links">
        <a href="https://www.linkedin.com/in/jess-wright-audio/" class="fa fa-linkedin"></a>
        <a href="https://www.instagram.com/jess_wright_audio/" class="fa fa-instagram"></a>
        <a href="https://soundcloud.com/jess-wright-372007340?utm_source=clipboard&utm_medium=text&utm_campaign=social_sharing" class="fa fa-soundcloud"></a>
        <a href="https://jesswrightmusic.bandcamp.com/" class="fa fa-bandcamp"></a>
        <a href="https://www.youtube.com/@baequeencat" class="fa fa-youtube"></a>
      </div>
      <a style="margin-bottom: 5px;" href="about-me.html">ABOUT ME</a>
      <a href="sound.html">THE KRIS NOCK BIG BAND</a>
      <a style="margin-bottom: 5px;" href="services.html">SERVICES</a>
      <a href="crew.html">FESTIVALS</a>
    </div>
    <p style="color:#ffffff" align="center">Jess Wright Audio LTD.</p>
  </div>
</footer>

CSS代码

footer {
  background-color: #212222;
  color: #ffffff;
}

a:link {
  color: white;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: white;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: #77eefa;
  background-color: transparent;
  text-decoration: none;
}

a:active {
  color: #77eefa;
  background-color: transparent;
  text-decoration: none;
}

.two-column-layout {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px; /* 可选：增加网格项之间的间距，让布局更美观 */
}

#ex1 {
  margin-inline: 35px;
}

/* 新增社交媒体容器样式 */
.social-links {
  display: flex;
  gap: 10px; /* 按钮之间的间距 */
  align-items: center;
}

/* 可选：调整社交媒体按钮的大小 */
.social-links .fa {
  font-size: 1.2em;
}

关键调整说明 #

1. HTML结构：把5个社交媒体按钮放进social-links容器，放在「CONTACT ME」的下一行，这样它会自动占据第三列的网格位置，不会影响其他列的布局。
2. CSS样式：用display:flex让容器内的按钮横向排列，gap属性控制按钮之间的间距，确保紧凑排列。
3. 移除冗余样式：删掉了「CONTACT ME」上的margin-left:125px，因为网格布局已经能让它处于第三列，不需要手动偏移。

这样修改后，社交媒体按钮会整齐排列在「CONTACT ME」下方，同时原有3列布局完全不受影响。

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