如何用 Flexbox 实现左右对齐的单行页头布局-html教程-PHP中文网

本文介绍如何使用 CSS Flexbox 将标题组（左对齐）与图标（右对齐）置于同一水平行，解决传统 float 或 inline 方式导致换行的问题，并提供可直接运行的完整代码示例。

本文介绍如何使用 css flexbox 将标题组（左对齐）与图标（右对齐）置于同一水平行，解决传统 `float` 或 `inline` 方式导致换行的问题，并提供可直接运行的完整代码示例。

在构建紧凑型页头（如弹窗标题栏、卡片头部）时，常需将文字信息左对齐、操作图标右对齐，且严格保持在同一行。原方案中因 #main-header 和 #icon_moreInfo 默认为块级元素，彼此垂直堆叠，即使尝试 float: right 或 display: inline，也易受父容器未定义布局上下文、浮动清除缺失或内联元素换行限制影响，导致图标掉到第二行。

推荐解法：Flexbox 布局（现代、可靠、语义清晰）

只需将外层容器 #main-header-wrapper 设为 display: flex，并配合 justify-content: space-between，即可自动将第一个子元素推至最左、第二个子元素推至最右，二者天然共处一行：

讯飞听见会议

讯飞听见会议是一款由科大讯飞推出的 AI 云视频会议与语音转写协作平台。

下载

#main-header-wrapper {
  display: flex;
  width: 100%;
  justify-content: space-between; /* 左右撑开 */
  align-items: center;            /* 垂直居中（可选，提升视觉一致性） */
  padding: 0 10px;                /* 可选：避免边缘紧贴 */
}

同时需修正 HTML 中的 ID 与 CSS 选择器匹配问题（原 CSS 使用 .icon_moreInfo 类名，但 HTML 中是 id="icon_moreInfo"），并确保图片尺寸可控：

<div id="main-header-wrapper">
  <div id="main-header">
    <span id="main-header-1">Title</span>
    <span id="main-header-2">Subtitle</span>
  </div>
  <div id="icon_moreInfo">
    <img src="https://banner2.cleanpng.com/20180718/brv/...more-info-icon-5b4fcee4e70c74.9013090315319569649464.jpg?x-oss-process=image/resize,p_40" alt="More info"  style="max-width:90%">
</div>
</div>

✅ 关键注意事项：

删除无效的 float: right 和 display: inline 尝试——Flexbox 下无需浮动；

确保 #main-header-wrapper 是两者的直接共同父容器（原结构已满足）；

添加 align-items: center 可使文本与图标在高度方向视觉对齐；

避免在 img 上使用全局样式（如 img { width:12px }），应限定作用域，防止意外影响其他图片；

height: 127x 是无效单位（应为 127px），请同步修正基础样式。

最终效果简洁稳定，兼容所有现代浏览器（Chrome 29+、Firefox 20+、Safari 6.1+、Edge 12+），且响应式友好——当容器宽度变化时，左右元素仍保持两端锚定，无需额外媒体查询干预。