使用 display: inline-block 创建多列容器时，因默认 vertical-align: baseline 导致高度不一致的块错位；只需统一设置 vertical-align: top 即可实现严格顶部对齐，各块内部结构互不影响。
使用 `display: inline-block` 创建多列容器时，因默认 `vertical-align: baseline` 导致高度不一致的块错位；只需统一设置 `vertical-align: top` 即可实现严格顶部对齐，各块内部结构互不影响。
在 Bootstrap 5 中，.d-inline-block 类将元素设为 inline-block 显示模式，这使其既能设置宽高（区别于普通 inline 元素），又能水平排列（区别于 block 元素）。但其默认垂直对齐方式为 baseline——即所有元素的基线（通常接近文字底部）对齐。当各容器内子元素数量不同（如一个含两行文本，另两个仅一行）时，视觉上就会出现“某一块被下推”的错位现象，并非布局塌陷或父容器干扰，而是 vertical-align 的默认行为所致。
解决方法极简而精准：为所有 .d-inline-block 元素显式声明 vertical-align: top。该声明强制所有块的上边缘对齐同一水平线，彻底消除因内容高度差异引发的偏移。
✅ 推荐写法（CSS 类复用，语义清晰）：
.align-top-inline {
display: inline-block;
vertical-align: top;
}<div class="container">
<div class="align-top-inline border border-primary" style="width:16%; height:15vh;">
<div>thing1</div>
<div>XXX</div>
</div>
<div class="align-top-inline border border-success" style="width:16%; height:15vh;">
<div>thing2</div>
</div>
<div class="align-top-inline border border-primary" style="width:16%; height:15vh;">
<div>thing3</div>
<div>XXX</div>
</div>
</div>⚠️ 注意事项：
- 不要依赖 float 或 position: absolute 解决此问题——它们会破坏文档流、增加维护成本，且与 inline-block 设计初衷相悖；
- 避免仅对单个元素加 vertical-align：必须全局统一设置，否则未设置的元素仍按 baseline 对齐，错位依旧存在；
- 若需响应式宽度（如 16% 在小屏下过窄），建议改用 Bootstrap 的栅格类（如 col-4 + d-inline-block 组合），再配合 vertical-align: top，兼顾弹性与对齐。
总结：inline-block 的对齐本质是行内级对齐行为，vertical-align 是它的核心控制属性。理解并善用它，就能在保持简洁 HTML 结构的同时，实现精准、稳定、可预测的多块并排布局。
