本文详解如何通过 `display: inline-block` 让多个 div 在一行内水平
排列
，并在容器宽度不足时自动换行；同时指出常见
html
结构错误与
css
书写陷阱，提供零类名修改的修复方案。
要让多个
⚠️ 注意事项：
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
inline-block 元素默认受
空白字符（空格、换行）影响
，会在元素间产生约 4px 的间隙。若需消除间隙，可将父容器 .block 的 font-size: 0，再为 .color 单独设置所需字体大小（如 font-size: 16px）；
所有 .color 子元素（如
✅ 效果说明：
四个 .color 元素将严格水平排列于同一行；
当窗口宽度不足以容纳全部元素时（例如添加第五个 .color），它们会自动折行，形成“网格流”效果（类似 flex-wrap: wrap，但无需 Flexbox）；
此方案兼容所有现代浏览器，且完全遵循题目约束：
不新增、不重命名、不删除任何已有 class
。
总结：inline-block 是实现轻量级多列流式布局的经典方案。关键不在“加在哪里”，而在“加得干净”——结构合法、样式专注、规避空白干扰。修复 HTML 闭合标签 + 为 .color 添加 display: inline-block + vertical-align: top，即可稳健达成目标。
元素水平排列（即“内联块”布局），核心在于：
将 .color 设置为 display: inline-block，并确保 HTML 结构合法、CSS 无干扰性声明
。
首先，原始 HTML 存在一个关键错误：.block 容器缺少闭合标签
。这会导致
浏览器
解析异常，使后续 CSS（如 inline-block）无法按预期生效。务必补全闭合标签，否则样式可能被忽略或渲染错乱。
其次，在不更改任何现有类名的前提下，只需在 .color 规则中添加 display: inline-block：
.color {
text-align: center;
display: inline-block; /* ✅ 关键添加项 */
}）目前宽度未显式继承，但因父级 .color 已设 width: 200px（来自 .blue 等规则），实际布局稳定； 原代码中存在拼写错误：text-align: cetner 应为 center（虽不影响 inline-block 排列，但建议修正以保证文本居中正常）； .block 本身无需设 inline-block —— 它是包裹容器，应保持 display: block（默认值），以提供正常的块级上下文和流式布局边界。 完整修复后的 CSS（仅追加必要声明，零类名改动）：
.block {
margin: 10px;
padding: 10px;
border: 2px solid #a2a2a6;
}
.color {
text-align: center;
display: inline-block; /* ✅ 启用内联块布局 */
vertical-align: top; /* 推荐：避免基线对齐导致的意外错位 */
/* 可选：消除空白间隙 */
/* font-size: 0; */
}
.blue, .red, .green, .yellow {
padding: 50px 0;
width: 200px;
text-align: center; /* 修正拼写错误 */
}
.blue { background-color: blue; }
.red { background-color: red; }
.green { background-color: green; }
.yellow { background-color: yellow; }