本文详解为何 inline-block 元素在设置固定宽度（如 500px）时意外换行，以及如何通过现代 CSS Flexbox 实现稳定、响应式的水平布局。

本文详解为何 `inline-block` 元素在设置固定宽度（如 500px）时意外换行，以及如何通过现代 css flexbox 实现稳定、响应式的水平布局。

在 Web 布局中，期望两个

元素并排显示却出现垂直堆叠，是初学者常遇的典型问题。你当前使用 display: inline-block 并为每个区块设定了 width: 500px，看似合理——但问题根源在于：inline-block 元素会将 HTML 中的换行符、空格等空白字符渲染为一个空格（约 4–8px 宽），导致两元素总宽度轻微超出容器可用空间，触发自动换行。尤其当父容器宽度有限（例如视口宽度仅 1024px），500px + 500px + 左右 margin（各 10px）+ 空白间隙 ≈ 超出 100%，浏览器只能回退为垂直排列。

更关键的是，inline-block 对齐依赖 vertical-align（默认 baseline），且难以精确控制间距与响应行为；而硬编码 width: 500px 和 height: 500px 会破坏跨设备适配性——在手机或小屏上必然溢出或错位。

✅ 推荐解法：使用 Flexbox（现代、语义清晰、原生支持对齐与间距）

只需三步改造：

1. 为父容器启用 Flex 布局
   将

   设为 display: flex，其子元素（即两个

   ）自动成为弹性项目，沿主轴（默认水平）排列。

2. 用相对单位替代固定像素宽度
   设置 width: 50% 或更优的 flex: 1（均分剩余空间），配合 box-sizing: border-box 确保 padding/border 不撑大尺寸。

3. 用 gap 精确控制间距（推荐替代 margin）
   避免因外边距合并或计算误差导致的布局偏移。

以下是优化后的完整代码示例：

main {
  display: flex;
  gap: 20px; /* 替代 margin，统一控制两区块间距 */
  width: 100%;
}

section {
  border-radius: 20px;
  height: 500px; /* 可根据需求保留固定高，或改用 min-height: 50vh 提升响应性 */
  background-color: #ffffff;
  border: 1px solid #f5f5f5;
  box-sizing: border-box;
}

section.structure,
section.specificity {
  flex: 1; /* 等宽填充，自动适应容器变化 */
}

<main><section class="structure">结构说明</section><section class="specificity">特异性规则</section></main>

⚠️ 注意事项：

• 若需兼容 IE10/IE11，请避免 gap（可降级为 margin + :first-child 重置）；
• flex: 1 等效于 flex: 1 1 0，意味着项目可伸缩、不收缩、基础尺寸为 0，从而公平分配空间；
• 如需响应式断点，在 @media (max-width: 768px) 中将 main { flex-direction: column; } 即可优雅回退为垂直堆叠；
• 移除 display: inline-block 后，HTML 中的换行和空格不再影响布局，代码可读性也大幅提升。

总结：放弃对 inline-block 的“微调式修复”，拥抱 Flexbox 是解决水平并排问题最可靠、可维护、面向未来的方式。它不仅消除了空白字符干扰，还提供了开箱即用的对齐、分布与响应能力——这才是现代 CSS 布局的正确起点。