CSS实现四div布局：隐藏部分div时剩余元素自动填充空间

现有HTML结构 #

<div class="container">
 <div id="box1" class="corner"></div>
 <div id="box2" class="corner right"></div>
 <div id="box3" class="corner"></div>
 <div id="boxAlways" class="corner right"></div>
</div>

当前CSS布局 #

.container {
 display: block;
}

.corner {
 width: 50%;
 display: inline-block;
 position: relative;
}

.right {
 float: right
}

需求说明 #

JS会根据文本内容隐藏无文本的div，仅存在以下几种可见元素组合：

• 仅boxAlways可见（数量1，奇数）
• box1 + boxAlways可见（数量2，偶数）
• box1 + box2 + boxAlways可见（数量3，奇数）
• 四个div全部可见（数量4，偶数）

需要实现：当可见div数量为奇数时，那个“单独”的元素占据容器100%宽度，其余元素保持50%宽度。

纯CSS解决方案 #

利用CSS相邻兄弟选择器匹配固定的几种场景，覆盖宽度属性：

.container {
 display: block;
}

.corner {
 width: 50%;
 display: inline-block;
 position: relative;
 box-sizing: border-box; /* 避免宽度溢出容器 */
}

.right {
 float: right
}

/* 场景1：仅boxAlways可见，占满宽度 */
#box1:hidden ~ #box2:hidden ~ #box3:hidden ~ #boxAlways {
 width: 100%;
 float: none; /* 清除原有的右侧浮动 */
}

/* 场景2：box1、box2、boxAlways可见，最后一个元素占满宽度 */
#box1:not(:hidden) ~ #box2:not(:hidden) ~ #box3:hidden ~ #boxAlways {
 width: 100%;
 float: none;
}

说明

• 用:hidden和:not(:hidden)伪类结合相邻兄弟选择器~，精准匹配你提到的固定场景
• box-sizing: border-box确保元素内边距、边框不会导致宽度溢出容器
• 清除浮动保证占满宽度的元素能正常铺满整行

备选JS方案（更灵活） #

如果后续场景扩展，纯CSS的固定匹配会受限，可通过JS标记可见元素状态，再用CSS处理：

JS代码（配合原有隐藏逻辑）

// 在隐藏无文本div的逻辑后执行
const container = document.querySelector('.container');
const visibleCorners = container.querySelectorAll('.corner:not([style*="display: none"])');

// 重置可见类
container.querySelectorAll('.corner.visible').forEach(el => el.classList.remove('visible'));
// 给可见元素添加标记类
visibleCorners.forEach(el => el.classList.add('visible'));

// 根据可见数量给容器添加状态类
container.classList.toggle('odd-count', visibleCorners.length % 2 !== 0);

对应CSS

.container {
 display: flex;
 flex-wrap: wrap;
}

.corner {
 flex: 1 1 50%;
 position: relative;
 box-sizing: border-box;
}

/* 奇数数量时，最后一个可见元素占满宽度 */
.container.odd-count .corner.visible:last-child {
 flex: 1 1 100%;
}

说明

• 改用Flexbox布局，避免float和inline-block的兼容性问题
• 通过JS动态标记可见元素和容器状态，CSS只需根据类名调整布局，扩展性更强

内容的提问来源于stack exchange，提问作者NickRPGreen