四个div如何嵌套在父div中

本文深入解析了如何优雅实现四个子div在父容器中整齐嵌套为四宫格布局，重点对比了flexbox与CSS Grid两大主流方案：flex布局以display: flex + flex: 1为核心，稳定可靠、无需计算宽度、天然抗内容撑开，适合基础均分场景；Grid布局则凭借grid-template-columns: repeat(4, 1fr) + gap展现出更强的灵活性与响应式潜力，轻松支持断点切换列数、跨列等复杂需求，代码更简洁、维护性更高——无论你是追求兼容稳妥还是未来可扩展性，这里都有即学即用的实战方案。

用 display: flex 最稳，四宫格自动均分宽度

直接给父 div 加 display: flex，子 div 默认水平排列，加 flex: 1 就能等宽。不用算百分比，也不怕内容撑开。

常见错误是只写 display: flex 却忘了设子元素的伸缩行为，结果四个 div 挤成一团或宽度不均。

• 父 div 必须加 display: flex，推荐同时加 gap: 8px 控制间距（比 margin 更干净）
• 每个子 div 加 flex: 1，等价于 flex: 1 1 0，强制忽略自身宽度，均分剩余空间
• 如果子 div 内容高度不一，加 align-items: stretch（flex 默认值，通常不用显式写）保证拉齐
• IE11 对 flex: 1 支持有 bug，若需兼容，改用 flex: 1 1 auto 或固定 flex-basis

用 display: grid 更灵活，适合响应式或不规则布局

Grid 天然适合“四宫格”场景，一行四列只要两行 CSS：父容器设 display: grid，再用 grid-template-columns: repeat(4, 1fr)。

比 Flex 更适合后续加断点——比如小屏时改成两列，只需一条 @media 规则，不用动 HTML 结构。

• repeat(4, 1fr) 表示 4 个等宽轨道；想留间隙？直接加 gap: 12px，不用在子元素上折腾 margin
• 如果某一个子 div 需要跨两列，加 grid-column: span 2，Flex 得额外包一层
• 注意旧版 Safari（1fr 在嵌套 Grid 中有渲染异常，可临时用 minmax(0, 1fr) 替代
• Grid 不受子元素 HTML 顺序限制，重排靠 grid-area 或 order，但日常四宫格基本用不到

别碰 float 和 inline-block，维护成本高还容易塌陷

现在还用 float: left + width: 25% 的写法，等于主动给自己埋坑：父容器高度塌陷、间隙难控制、响应式要重写整套逻辑。

inline-block 看似简单，但子 div 间换行符会转成空格，导致实际宽度超 100%，必须删 HTML 空格或设 font-size: 0，后续调字体又得重设，纯属负优化。

• 所有现代浏览器都支持 Flex 和 Grid，无兼容理由硬扛 float
• 如果项目里已有大量 float 布局，优先局部替换，别为了统一强行重构整个页面
• 真遇到必须用 inline-block 的遗留系统（比如某些 CMS 模板），至少把子 div 写在同一行，避免空格干扰

宽高比不对？检查子 div 是否有默认 margin 或 padding

四个 div 看起来没填满父容器，或者上下错位，八成是子元素自带 margin（比如 h1、p 标签）或父容器有 padding 干扰了计算。

Flex/Grid 只管分配可用空间，不会帮你抵消默认样式。尤其用 rem 或 em 设宽时，根字体大小一变，整个布局就飘。

• 快速排查：浏览器开发者工具里选中子 div，看 computed 样式里的 margin 和 padding 是否非零
• 通用清零方案：父 div 加 display: flex 后，子元素加 margin: 0；或全局用 * { margin: 0; padding: 0; box-sizing: border-box; }
• 如果子 div 里放图片，记得设 img { display: block; }，否则底部会有空白间隙

事情说清了就结束。真正麻烦的从来不是“怎么放四个 div”，而是后面加背景、加动画、加点击态时，哪一层该设 overflow，哪个 z-index 该提级——那些才是卡住人的地方。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~