如何让多个 div 元素严格并排显示而不换行？

作者：袖梨 2026-06-11

当使用 inline-block 布局多个 div 时，因 HTML 中的换行符和空格被渲染为文本节点，导致元素间产生不可见间隙，进而使第三列被迫折行——这是常见布局失效主因，可通过移除空白、重置字体大小或改用 Flexbox 彻底解决。

当使用 `inline-block` 布局多个 div 时，因 html 中的换行符和空格被渲染为文本节点，导致元素间产生不可见间隙，进而使第三列被迫折行——这是常见布局失效主因，可通过移除空白、重置字体大小或改用 flexbox 彻底解决。

在构建 3×3 网格（如九宫格卡片、图标矩阵）时，许多开发者会尝试用 display: inline-block 实现“三列并排 + 每列三行”的嵌套结构，但常遇到前两列正常显示、第三列意外掉到下一行的问题。这并非 CSS 计算错误，而是 inline-block 的固有行为所致。

根本原因：HTML 空白字符被解析为间距

浏览器会将 <div class="two"> 之间的换行与缩进视作一个空格字符（相当于），而 inline-block 元素会像文字一样尊重该空格。即使每个 .two 宽度设为 33.333%，加上约 4px 的默认空白间隙后，总宽度轻松超过 100%，触发自动换行。

✅ 正确解决方案（推荐 Flexbox）

Flexbox 是现代、语义清晰且无空白干扰的首选方案：

#one {  display: flex;  width: 30vw;  height: 30vh;  gap: 2px; /* 可选：统一控制列/行间距 */}.two {  flex: 1; /* 等宽占满 #one */  display: flex;  flex-direction: column;  gap: 2px;}.three {  flex: 1;  background: #e0f7fa;  border: 1px solid #00acc1;}

<div id="one">  <div class="two">    <div class="three"></div>    <div class="three"></div>    <div class="three"></div>  </div>  <div class="two">    <div class="three"></div>    <div class="three"></div>    <div class="three"></div>  </div>  <div class="two">    <div class="three"></div>    <div class="three"></div>    <div class="three"></div>  </div></div>

⚠️ 若坚持使用 inline-block（兼容旧项目）

需同时满足三项条件：

消除 HTML 空白：将 .two 标签写在同一行，或注释掉换行；
修正宽度计算：减去间隙（如 width: calc(33.333% - 4px)）；
父容器禁用字体大小：#one { font-size: 0; }，子元素再重设 font-size（若含文字）；

#one {  font-size: 0; /* 关键：消除 inline-block 间隙根源 */}.two {  display: inline-block;  width: calc(33.333% - 2px); /* 预留左右 margin 总和 */  font-size: 16px; /* 子元素恢复字体 */}