不使用float实现固定HTML结构布局：两div上下叠放，第三div填充空间

是否可以在不使用float的前提下，实现两个div上下叠放，同时第三个div填充剩余空间？要求不能修改现有HTML结构，也不能使用float。以下是我尝试的代码：

div{ width: 33%; height: 100px; background: red; display: inline-block; }
.left{ background: blue; }
.right{ background: green; }
.middle{ width: 50%; height: 200px; }

<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>

当然可以！完全不用float，也不用动你的HTML结构，用CSS Grid就能轻松搞定，这也是现在布局的最优解之一。另外我也会帮你分析下原来代码的问题，给你清晰的实现方案：

问题分析：你原来的inline-block方案的缺陷 #

你用inline-block的思路方向没问题，但有两个核心问题：

• inline-block元素之间会存在默认的空白间隙，导致三个div的总宽度超过100%，无法在一行正常显示；
• 垂直对齐默认是基线对齐，middle的高度是200px，会让另外两个div的位置偏移，达不到预期的上下叠放效果。

最优方案：CSS Grid布局 #

Grid是专门为二维布局设计的，我们可以直接给父容器（这里用<body>就行，因为你的三个div直接放在页面里）设置网格规则，然后指定每个div的位置：

/* 重置body默认边距，避免布局偏移 */
body {
  margin: 0;
  /* 设置网格布局 */
  display: grid;
  /* 三列：左右各33%，中间列自动补满剩余空间 */
  grid-template-columns: 33% auto 33%;
  /* 两行，每行高度100px，刚好匹配middle的200px总高度 */
  grid-template-rows: 100px 100px;
}

.left {
  background: blue;
  /* 占据第一行、第一列 */
  grid-area: 1 / 1;
}

.middle {
  background: red;
  /* 从第一行到第三行（跨2行），占据中间列 */
  grid-area: 1 / 2 / 3 / 3;
}

.right {
  background: green;
  /* 占据第二行、第三列 */
  grid-area: 2 / 3;
}

/* 移除你原来的inline-block等样式，替换成上面的代码 */

这样实现的效果完全符合你的需求：

• 左侧蓝色<div class="left">在左上角（100px高），右侧绿色<div class="right">在右下角（100px高），这两个div实现了上下分布；
• 中间红色<div class="middle">填充了中间的所有剩余空间，高度刚好200px。

备选方案：Flexbox（适合一维布局延伸场景） #

如果你更习惯用Flexbox，也可以通过调整flex-direction和order属性实现，但相对Grid来说代码会繁琐一点：

body {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  height: 200px; /* 总高度匹配middle的高度 */
}

.left {
  background: blue;
  width: 33%;
  height: 100px;
  order: 1;
}

.middle {
  background: red;
  width: 34%;
  height: 200px;
  order: 2;
}

.right {
  background: green;
  width: 33%;
  height: 100px;
  align-self: flex-end;
  order: 3;
}

这个方案通过Flex的换行和对齐属性，也能达到类似效果，但Grid的代码可读性和维护性会更好。

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