如何实现电话图标在Facebook图标正下方的布局？

我尝试将电话图标放置在Facebook图标正下方，但未能成功实现。我曾使用<div>标签尝试布局，不过图标超出了footer内的media容器。

原代码 #

CSS

footer {
  height: 300px;
  box-sizing: border-box;
  border: 1px solid black;
  margin-top: 3%;
  padding: 25px;
}
.media {
  width: 400px;
  height: 80%;
  box-sizing: border-box;
  border: 1px solid black;
}
.media h1 {
  font-size: 20px;
}
.media img {
  margin: 65px;
  margin-left: 0;
  margin-top: 3%;
}
.select-sign select {
  width: 230px;
}
.select-submit select {
  width: 100px;
  color: white;
  background-color: #117CC0;
}

HTML

<footer>
  <div class="media">
    <h1>STAY CONNECTED</h1>
    <div class="select-div" style="display: flex;gap:20px">
      <div class="select-sign"> 
        <select>
          <option value="sign-up" label="Sign up for emails"></option>
        </select>
      </div>
      <div class="select-submit"> 
        <select>
          <option value="submit" label="SUBMIT"></option>
        </select>
      </div>
    </div>

    <div class="img">
      <!-- facebook icon -->
      <img src="./images/facebook.png">
      <!-- twitter -->
      <img src="./images/twitter.png">
      <!-- youtube -->
      <img src="./images/youtube.png">
    </div>
    <!-- phone-icon -->
    <div>
      <img src="./images/phoneIcon.png" alt=" ">
    </div>
  </div>
</footer>

要实现电话图标在Facebook图标正下方且不超出容器，可通过调整HTML结构和CSS布局来解决：

1. 调整HTML结构 #

将电话图标移入社交媒体图标所在的容器，统一管理所有图标：

<footer>
  <div class="media">
    <h1>STAY CONNECTED</h1>
    <div class="select-div" style="display: flex;gap:20px">
      <div class="select-sign"> 
        <select>
          <option value="sign-up" label="Sign up for emails"></option>
        </select>
      </div>
      <div class="select-submit"> 
        <select>
          <option value="submit" label="SUBMIT"></option>
        </select>
      </div>
    </div>

    <!-- 统一图标容器 -->
    <div class="social-icons">
      <img src="./images/facebook.png" alt="Facebook">
      <img src="./images/twitter.png" alt="Twitter">
      <img src="./images/youtube.png" alt="Youtube">
      <img src="./images/phoneIcon.png" alt="Phone">
    </div>
  </div>
</footer>

2. 修改CSS样式 #

使用Flex布局控制图标排列，替换原有margin设置，确保布局可控：

footer {
  height: 300px;
  box-sizing: border-box;
  border: 1px solid black;
  margin-top: 3%;
  padding: 25px;
}
.media {
  width: 400px;
  height: 80%;
  box-sizing: border-box;
  border: 1px solid black;
  padding: 10px; /* 增加内边距，防止内容贴边溢出 */
}
.media h1 {
  font-size: 20px;
  margin-top: 0; /* 移除默认margin，优化空间利用 */
}
/* Flex布局实现图标换行排列 */
.social-icons {
  display: flex;
  flex-wrap: wrap; /* 允许图标自动换行 */
  gap: 65px; /* 图标间的间距，替代原有margin */
  margin-top: 3%;
}
.social-icons img {
  flex: 0 0 auto; /* 保持图标原始尺寸 */
}
.select-sign select {
  width: 230px;
}
.select-submit select {
  width: 100px;
  color: white;
  background-color: #117CC0;
}

核心要点 #

• 结构整合：把所有图标放在同一容器，避免独立div导致的布局脱离问题。
• Flex布局：flex-wrap: wrap让图标在空间不足时自动换行，gap属性更精准控制间距，比margin更易维护。
• 容器内边距：给.media添加padding，确保内容不会紧贴容器边框，防止图标溢出。

内容的提问来源于stack exchange，提问作者M.S