本文介绍如何仅用纯 css 实现一个四宫格布局，当其中部分 div 为空（或被标记为隐藏）时，剩余可见元素能智能调整宽度——特别是单个孤立元素自动占满整行，无需 javascript 干预。
本文介绍如何仅用纯 css 实现一个四宫格布局，当其中部分 div 为空（或被标记为隐藏）时，剩余可见元素能智能调整宽度——特别是单个孤立元素自动占满整行，无需 javascript 干预。
在响应式与内容驱动的前端开发中，静态网格布局常因动态内容缺失而显得松散或错位。本方案针对典型的“四宫格”结构（box1、box2、box3、boxAlways），满足核心约束：
-
boxAlways永远可见且必须存在； - 其余三个 box 可能为空（即无文本内容），且空 box 总是从末尾开始连续出现（如仅
box3空、box2+box3空、或三者全空）； - 布局需完全流式（无固定像素尺寸），适配多页面复用；
- 关键目标：当某一行只剩一个可见元素时，该元素应自动扩展至 100% 容器宽度，视觉上保持紧凑对齐。
✅ 推荐方案：基于 :empty 伪类 + 邻居选择器的纯 CSS 解法
我们放弃传统浮动（float: right）和易受空白符干扰的 inline-block，转而采用更健壮的现代写法：
- 使用
font-size: 0消除inline-block元素间的默认间隙； - 利用
:empty伪类精准识别空元素（比手动加.hide类更语义化、零 JS 依赖）； - 结合相邻兄弟选择器（
+）与:has()（现代浏览器支持）精准定位上下文关系。
以下是完整、可直接复用的 CSS：
@layer normal, priority;
@layer priority {
:empty {
display: none;
}
}
@layer normal {
.container {
font-size: 0; /* 消除 inline-block 间隙 */
border: 1px solid #ddd;
margin-block-end: 20px;
}
.corner {
font-size: 1rem; /* 恢复子元素字体 */
width: 50%;
display: inline-block;
text-align: center;
background-color: moccasin;
vertical-align: top; /* 防止基线对齐错位 */
}
/* 当 boxAlways 是唯一可见元素（前三者均空）→ 占满整行 */
:empty + :empty + :empty + #boxAlways {
width: 100%;
}
/* 当 box1 有内容，box2 & box3 为空 → box1 占满上行，boxAlways 占满下行 */
#box1:has(+ :empty + :empty) {
width: 100%;
}
/* 当 box1 & box2 有内容，box3 为空 → boxAlways 占满下行（因上行已满） */
:not(:empty) + :not(:empty) + :empty + #boxAlways {
width: 100%;
}
/* 可选：统一右对齐样式（若需视觉区分） */
#boxAlways {
background-color: lightblue;
}
}
? HTML 结构示例（直接套用）
<div class="container"> <div id="box1" class="corner">1</div> <div id="box2" class="corner">2</div> <div id="box3" class="corner"></div> <div id="boxAlways" class="corner">box always</div> </div>
✅ 兼容性说明：
:empty和相邻选择器+支持所有现代浏览器；:has()在 Chrome 105+、Firefox 121+、Safari 15.4+ 中已稳定支持。若需支持旧版 IE 或早期 Safari，可退化为 JS 标记.hide类 + 对应 CSS 规则（见原答案中.hide + .hide + .hide + &写法）。
⚠️ 注意事项与最佳实践
-
避免内联空白：确保 HTML 中
box1~boxAlways的标签间无换行或空格，否则:empty可能失效（因含文本节点）。推荐写成单行或使用注释分隔； -
勿滥用
float：原方案中的float: right会破坏inline-block流式行为，已移除； -
vertical-align: top必不可少：防止不同高度 box 因默认baseline对齐导致行高塌陷； -
语义优于技巧：优先用
:empty而非 JS 控制类名，使样式逻辑与 DOM 状态解耦，提升可维护性。
此方案以极简 CSS 实现了动态网格的智能伸缩，真正践行“内容决定布局”的现代 CSS 哲学——无需框架、不写一行 JS，即可交付健壮、可复用、符合语义的响应式四宫格组件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
