如何实现桌面端footer-txt与footer-img的横向并排布局？

云上老周

2026-8-11

你可以通过CSS 媒体查询结合 Flexbox 实现需求，核心逻辑是在桌面端尺寸下让父容器转为弹性布局，使文本与图片容器横向并排。

修改后的完整 CSS 代码

#footer {
  background-color: #98AFFF;
}

.footer-txt {
  font-size: 14px;
  color: #464646;
  text-align: left;
}

.footer-img {
  display: flex;
  gap: 25px;
  justify-content: center; /* 移动端保持图片居中 */
}

/* 桌面端断点，可根据设计需求调整宽度阈值 */
@media (min-width: 768px) {
  #footer-content {
    display: flex;
    align-items: center; /* 让文本与图片垂直居中对齐 */
    gap: 30px; /* 控制文本与图片的横向间距 */
    /* 若需要文本靠左、图片靠右，可替换为 justify-content: space-between; */
  }

  .footer-img {
    justify-content: flex-start; /* 桌面端取消图片居中，跟随父容器布局 */
  }

  /* 覆盖移动端的上下内边距，避免多余留白 */
  .footer-txt {
    padding-bottom: 0;
  }

  .footer-img {
    padding-top: 0;
  }
}

关键实现细节

移动端默认布局：父容器 #footer-content 保持块级元素特性，footer-txt 和 footer-img 自然上下堆叠，符合你的预期效果。
桌面端触发规则：当屏幕宽度达到设定断点（如 768px），将 #footer-content 设为 display: flex，通过 align-items: center 保证文本与图片垂直对齐。
间距与对齐调整：可通过 gap 控制文本与图片的横向距离，或用 justify-content: space-between 让两者分别靠向容器两侧，适配不同设计需求。
内边距优化：在桌面端移除移动端的上下内边距，避免布局出现不必要的留白。