本文介绍如何使用 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，即可自动将第一个子元素推至最左、第二个子元素推至最右，二者天然共处一行：
#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"
alt="More info"
style="width: 12px; height: 12px; vertical-align: middle;">
</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+），且响应式友好——当容器宽度变化时，左右元素仍保持两端锚定，无需额外媒体查询干预。
