本文介绍如何仅用纯 css 实现一个四宫格容器，当其中部分 div 为空（或被隐藏）时，剩余可见元素能智能重排：单列独占 100% 宽度，双列并排各占 50%，无需 javascript 干预，完全响应式且无固定尺寸依赖。
本文介绍如何仅用纯 css 实现一个四宫格容器，当其中部分 div 为空（或被隐藏）时，剩余可见元素能智能重排：单列独占 100% 宽度，双列并排各占 50%，无需 javascript 干预，完全响应式且无固定尺寸依赖。
在构建灵活、语义清晰的网格布局时，我们常希望样式能“感知”内容状态——例如，当某些区块因为空内容而被隐藏时，其余可见区块应自动扩展以充分利用可用空间。本方案针对一个固定结构的四元素容器（box1、box2、box3、boxAlways），其中 boxAlways 永远可见，其余三者按从右到左、从上到下的逻辑顺序可能为空（即空元素总出现在末尾），目标是实现：
- ✅ 4 个元素全显 → 2×2 网格（每行两个 50% 宽 div）
- ✅ 3 个元素显（
box3隐藏）→box1+box2占第一行，boxAlways独占第二行（100% 宽） - ✅ 2 个元素显（
box2、box3隐藏）→box1独占第一行，boxAlways独占第二行 - ✅ 仅
boxAlways显 → 全容器仅剩一列，boxAlways100% 宽居中
关键在于不依赖 JS 计算或类名切换，而是利用现代 CSS 选择器能力（尤其是 :empty 和 :has()）结合兄弟组合器进行“上下文感知”布局。
✅ 推荐方案：基于 :empty 的纯 CSS 响应式控制
我们采用 display: inline-block（保持与原始结构兼容），并通过 font-size: 0 消除行内元素默认间隙。核心逻辑使用 :empty 伪类识别空元素，并用相邻兄弟选择器（+）定位特定排列模式下的 #boxAlways，再配合 :has() 精准控制 #box1 的独占行为：
@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 在以下两种情形下独占整行 */
#boxAlways {
background-color: lightblue;
/* 情形1：box1/box2/box3 全空 → boxAlways 是唯一可见元素 */
:empty + :empty + :empty + &,
/* 情形2：box1/box2 有内容，box3 为空 → box1+box2 占第一行，boxAlways 独占第二行 */
:not(:empty) + :not(:empty) + :empty + & {
width: 100%;
}
}
/* box1 在 box2 和 box3 均为空时，也独占第一行 */
#box1:has(+ :empty + :empty) {
width: 100%;
}
}? 使用说明与注意事项
-
HTML 结构必须严格保持顺序：
box1→box2→box3→boxAlways，否则+和:has()无法正确匹配 DOM 上下文。 -
:empty匹配真正空节点：即<div></div>或<div class="..."></div>（不含文本、换行、注释）。若含空格或换行符，需预处理或改用 JS 添加.hide类。 -
浏览器兼容性：
:has()目前（2024）已获 Chrome 105+、Firefox 121+、Safari 15.4+ 支持；若需支持旧版，可回退至.hide类方案（见原答案第一种写法）。 -
避免浮动干扰：原问题中
.right { float: right }会破坏inline-block流式布局，已移除；所有对齐由 DOM 顺序和宽度控制，更可靠。 -
无障碍友好：
display: none隐藏的元素天然脱离可访问树，符合语义预期。
✅ 最终效果验证（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> <!-- 渲染为：[1][2] → 第一行；[box always] → 第二行全宽 -->
该方案摒弃了复杂的 Grid/Flex 动态计算，转而以声明式、可预测的 CSS 逻辑应对有限但明确的排列组合，兼顾简洁性、可维护性与跨页面复用性——真正做到了“内容驱动样式”，是现代 CSS 状态感知能力的典型实践。
立即学习“前端免费学习笔记（深入）”；
