如何基于可用元素调整网页布局（不使用绝对定位）

完全不用position: absolute，靠Flexbox或者CSS Grid就能轻松实现你要的布局，还能让红色元素的宽度自动响应绿色元素的存在与否，完美解决之前绝对定位带来的问题。

首选方案：Flexbox 布局 #

这是最适合这种动态场景的工具，上手简单还灵活：

1. 先搭好HTML结构 #

把红色、绿色、蓝色元素放在同一个父容器里就行，绿色元素不管是直接从DOM里删掉，还是设置display: none隐藏，都不影响布局逻辑：

<div class="layout-container">
  <div class="red-box">红色元素</div>
  <!-- 这个绿色元素可能存在或隐藏 -->
  <div class="green-box">绿色元素</div>
  <div class="blue-box">蓝色元素</div>
</div>

2. 写CSS样式 #

给父容器开启Flex布局，然后让红色盒子自动占据剩余空间，绿色和蓝色盒子保持自身宽度：

.layout-container {
  display: flex;
  gap: 10px; /* 可选，给元素之间加些间距，看起来更舒服 */
}

.red-box {
  flex-grow: 1; /* 核心！让红色盒子吃掉容器里剩下的所有空间 */
  background: #ff5252;
  padding: 1.5rem;
}

.green-box {
  background: #69f0ae;
  padding: 1.5rem;
  /* 要隐藏的话直接加 display: none; 就行 */
}

.blue-box {
  background: #42a5f5;
  padding: 1.5rem;
}

效果咋样？ #

• 当绿色元素存在时：红色盒子会自动占据容器中除了绿、蓝盒子宽度之外的所有空间，完美适配布局；
• 当绿色元素消失时：红色盒子会自动调整宽度，占据蓝盒子之外的所有空间，完全符合你的要求。

备选方案：CSS Grid 布局 #

如果你更喜欢Grid的布局逻辑，也能实现一样的效果：

.layout-container {
  display: grid;
  grid-template-columns: 1fr auto auto; /* 第一列占满剩余，后两列自适应内容 */
  gap: 10px;
}

.red-box {
  background: #ff5252;
  padding: 1.5rem;
}

.green-box {
  background: #69f0ae;
  padding: 1.5rem;
}

.blue-box {
  background: #42a5f5;
  padding: 1.5rem;
}

这个方案的效果和Flexbox完全一致，当绿色元素不存在时，Grid会自动调整列布局，红色盒子依然会占满剩余空间。

为啥之前绝对定位不行？ #

因为position: absolute会让元素脱离正常文档流，红色盒子根本感知不到蓝色盒子的存在，自然宽度不会受影响。而Flexbox和Grid都是基于正常文档流的布局方式，元素之间会互相影响，刚好能解决你的痛点。

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