本文介绍使用 css flexbox 将标题（含副标题）左对齐、图标右对齐并严格保持在同一行的实用方案，解决传统 float 或 inline 布局失效问题。
本文介绍使用 css flexbox 将标题（含副标题）左对齐、图标右对齐并严格保持在同一行的实用方案，解决传统 float 或 inline 布局失效问题。
要让两个
元素（如标题组和图标容器）严格并排显示于同一行，且分别锚定在容器的最左与最右边缘，CSS Flexbox 是最简洁、可靠且语义清晰的解决方案。原代码中将 #main-header 和 #icon_moreInfo 作为兄弟元素包裹在 #main-header-wrapper 内，但未设置父容器为弹性布局，导致浏览器按默认文档流渲染——后者自然换行。
✅ 正确做法是：将 #main-header-wrapper 设为 display: flex，并配合 justify-content: space-between，即可自动将首个子元素推至左侧、最后一个子元素推至右侧，中间不留空隙。
以下是优化后的完整实现：
<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/kisspng-computer-icons-icon-design-encapsulated-postscript-more-info-icon-5b4fcee4e70c74.9013090315319569649464.jpg?x-oss-process=image/resize,p_40" alt="More info" style="max-width:90%" style="max-width:90%">
</div>
</div>
对应关键 CSS（已修正原代码中的选择器错误与单位笔误）：
/* 修复：原CSS中存在拼写错误（.icon_moreInfo → #icon_moreInfo），且#body未定义；height: 127x 应为 127px */
html {
width: 279px;
height: 127px; /* 修正单位：px */
background: #EEEEEE;
}
/* 父容器启用 Flex 布局 */
#main-header-wrapper {
display: flex;
justify-content: space-between; /* 左右撑开 */
align-items: center; /* 垂直居中对齐（可选，提升视觉一致性） */
padding: 12px 10px; /* 替代原 margin-top/margin-left，更可控 */
box-sizing: border-box;
}
#main-header {
/* 移除浮动与inline干扰，由flex统一控制 */
}
#main-header-1 {
font-family: 'Mark Pro', sans-serif;
font-weight: 450;
font-size: 18px;
line-height: 1;
letter-spacing: -0.02em;
color: #000000;
}
#main-header-2 {
font-family: 'Mark Pro', sans-serif;
font-weight: 450;
font-size: 10px;
line-height: 1;
letter-spacing: -0.02em;
color: #5D5D5D;
margin-left: 4px; /* 微调标题与副标题间距 */
}
#icon_moreInfo {
/* 移除 float:right —— flex 下无需浮动 */
width: 12px;
height: 12px;
}
#icon_moreInfo img {
width: 100%;
height: 100%;
vertical-align: middle; /* 防止基线对齐导致的底部空白 */
}
⚠️ 注意事项：
- 选择器必须精确匹配：原 CSS 中 .icon_moreInfo 应改为 #icon_moreInfo（ID 选择器以 # 开头）；
- 避免混合布局模型：float 与 flex 同时使用易引发冲突，Flex 容器内子元素应完全交由 flex 属性控制；
- 响应式友好：justify-content: space-between 在窄屏下仍能保持左右锚定，比 margin-left: auto 更直观；
- 垂直对齐建议：添加 align-items: center 可确保文字与图标在高度方向视觉居中，尤其当字体行高不一致时效果显著。
总结：Flexbox 的 display: flex + justify-content: space-between 是现代 Web 开发中实现“两端对齐单行布局”的标准范式，兼具简洁性、可维护性与跨浏览器兼容性（支持 IE11+ 及所有现代浏览器）。放弃 float 和 inline-block 等过时方案，能从根本上规避换行、塌陷与对齐异常等问题。
