CSS 实现动态自适应四宫格布局：隐藏元素后自动填充剩余空间-html教程-PHP中文网

CSS 实现动态自适应四宫格布局：隐藏元素后自动填充剩余空间

本文介绍如何仅用纯 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 显 → 全容器仅剩一列，boxAlways 100% 宽居中

关键在于不依赖 JS 计算或类名切换，而是利用现代 CSS 选择器能力（尤其是 :empty 和 :has()）结合兄弟组合器进行“上下文感知”布局。

✅ 推荐方案：基于 `:empty` 的纯 CSS 响应式控制

我们采用 display: inline-block（保持与原始结构兼容），并通过 font-size: 0 消除行内元素默认间隙。核心逻辑使用 :empty 伪类识别空元素，并用相邻兄弟选择器（+）定位特定排列模式下的 #boxAlways，再配合 :has() 精准控制 #box1 的独占行为：

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

@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 匹配真正空节点：即或（不含文本、换行、注释）。若含空格或换行符，需预处理或改用 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 状态感知能力的典型实践。