为何第三个div未位于第一个div正下方？如何用CSS调整？

问题描述 #

给定如下HTML与CSS代码，第三个div（div-3）未处于第一个div（div-1）的正下方，需分析该现象的原因，并给出CSS修复代码。

HTML代码 #

<div class="div-main">
  <div class="div-1">
    1
  </div>
  <div class="div-2">
    2
  </div>
  <div class="div-3">
    3
  </div>
</div>

CSS代码 #

.div-main {
  border: 5px solid yellow;
  padding: 15px;
}

.div-1 {
  border: 1px solid black;
  padding: 15px;
  width: 30%;
  height: 30vh;
  display: inline-block;
}

.div-2 {
  border: 1px solid black;
  padding: 15px;
  width: 69%;
  height: 50vh;
  display: inline-block;
}

.div-3 {
  border: 1px solid black;
  padding: 15px;
  width: 30%;
  height: 30vh;
  display: inline-block;
}

问题原因 #

1. inline-block元素的布局特性：inline-block元素同时具备行内元素和块级元素的特性，默认按行内规则排列。div-1和div-2的宽度（30%+69%）加上各自的padding、border，再加上HTML中元素间的空白字符，总宽度超过父容器的100%，导致div-2被挤到div-1下方。而div-3作为inline-block元素，会接着div-2的右侧布局，或被挤到下一行，但由于div-2高度高于div-1，div-3顶部会对齐到div-2的基线，无法与div-1底部对齐。
2. 盒模型默认规则：默认的content-box盒模型中，width仅计算内容区域宽度，padding和border会额外增加元素实际宽度，进一步加剧了宽度溢出问题。

修复方案 #

方法一：Flexbox布局（推荐） #

通过Flex布局灵活控制子元素排列，代码简洁且兼容性好：

/* 全局统一盒模型，避免重复设置 */
* {
  box-sizing: border-box;
}

.div-main {
  border: 5px solid yellow;
  padding: 15px;
  display: flex;
  flex-wrap: wrap; /* 允许元素在宽度不足时换行 */
  gap: 8px; /* 可选，设置元素间的间距 */
}

.div-1 {
  border: 1px solid black;
  padding: 15px;
  width: 30%;
  height: 30vh;
}

.div-2 {
  border: 1px solid black;
  padding: 15px;
  width: calc(70% - 8px); /* 减去gap的宽度，保证总宽度不溢出 */
  height: 50vh;
}

.div-3 {
  border: 1px solid black;
  padding: 15px;
  width: 30%;
  height: 30vh;
}

说明：box-sizing: border-box让width包含padding和border，避免宽度溢出；Flex布局的flex-wrap: wrap使元素自动换行，div-3设置30%宽度后会自动对齐到div-1的正下方。

方法二：修复inline-block布局问题 #

如果坚持使用inline-block，需解决宽度溢出和对齐问题：

/* 全局统一盒模型 */
* {
  box-sizing: border-box;
}

.div-main {
  border: 5px solid yellow;
  padding: 15px;
  font-size: 0; /* 消除inline-block元素间的空白字符 */
}

.div-1 {
  border: 1px solid black;
  padding: 15px;
  width: 30%;
  height: 30vh;
  display: inline-block;
  font-size: 16px; /* 恢复正常字体大小 */
  vertical-align: top; /* 让元素顶部对齐，避免基线错位 */
}

.div-2 {
  border: 1px solid black;
  padding: 15px;
  width: 69%;
  height: 50vh;
  display: inline-block;
  font-size: 16px;
  vertical-align: top;
}

.div-3 {
  border: 1px solid black;
  padding: 15px;
  width: 30%;
  height: 30vh;
  display: inline-block;
  font-size: 16px;
  vertical-align: top;
}

说明：font-size: 0消除了inline-block元素间的空白字符，避免额外宽度占用；vertical-align: top让所有inline-block元素顶部对齐，解决基线对齐导致的错位；盒模型设置后，元素宽度计算更直观，div-3会在新行对齐到div-1正下方。

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