本文详解如何通过 `display: inline-block` 让多个 div 在同一行内水平排列，并自动换行；重点指出常见 html 结构错误（如缺失闭合标签）和 css 应用位置误区，提供零类名修改的可靠解决方案。
要使多个 .color 容器（即蓝、红、绿、黄四个色块）在同一行内水平排列，并在容器宽度不足时自动折行（类似流式布局），核心在于正确应用 display: inline-block —— 且必须作用于直接参与排列的子元素，即 .color，而非其父容器 .block。
首先，修正一个关键的 HTML 结构问题：原始代码中
缺少闭合标签
。这是导致样式失效的常见原因——浏览器解析异常会破坏渲染上下文，使后续 CSS（包括 inline-block）无法按预期生效。务必确保结构完整：Colors
Blue
Red
Green
Yellow
接着，在 CSS 中，只需为 .color 类添加 display: inline-block：
.color {
text-align: center;
display: inline-block; /* ? 关键声明：让每个 .color 行内块级化 */
vertical-align: top; /* 推荐添加：避免基线对齐导致的意外间隙 */
}⚠️ 注意事项：
- 不要加在 .block 上：.block 是父容器，设为 inline-block 不会影响其子元素的排列方式；
- 修复拼写错误：所有 .blue/.red 等类中的 text-align: cetner 均应改为 center（原文拼写错误）；
- 处理空白符间隙：HTML 中 .color 元素间的换行与空格会被渲染为约 4px 的空白间隙。若需彻底消除，可将 .block 的 font-size: 0，再为 .color 单独设置 font-size（但本题要求不改类名，故推荐更稳妥的 vertical-align: top + 保持结构清晰）；
- 响应式友好：inline-block 元素天然支持流式折行——当容器宽度不足以容纳全部 .color 时，后续元素会自动换至下一行，无需媒体查询即可实现基础栅格行为。
最终效果：四个色块水平并列，等宽居中，文字垂直居中显示；新增 .color 元素后，超出容器宽度时自动换行，完全符合“一行显示、溢出折行”的需求。
