如何让高度不同的div从同一顶部起始位置对齐

你遇到的问题根源是inline-block元素默认的vertical-align属性值为baseline，导致元素会沿着基线对齐，最终表现为底部对齐。下面是几种实用的解决方法：

方法1：修改vertical-align属性 #

直接给所有设置为inline-block的div添加vertical-align: top;，强制它们顶部对齐：

.tall {
  background-color: blue;
  width: 100px;
  height: 200px;
  display: inline-block;
  vertical-align: top; /* 添加该行实现顶部对齐 */
}
.medium {
  background-color: green;
  width: 100px;
  height: 150px;
  display: inline-block;
  vertical-align: top; /* 添加该行实现顶部对齐 */
}
.short {
  background-color: red;
  width: 100px;
  height: 100px;
  display: inline-block;
  vertical-align: top; /* 添加该行实现顶部对齐 */
}

HTML保持原有结构即可：

<div class="medium"></div>
<div class="tall"></div>
<div class="short"></div>

方法2：使用Flexbox布局 #

如果允许调整整体布局结构，用Flexbox会更简洁——给父容器设置display: flex，子元素默认就会顶部对齐：

.container {
  display: flex; /* 父容器启用Flex布局 */
}
.tall {
  background-color: blue;
  width: 100px;
  height: 200px;
}
.medium {
  background-color: green;
  width: 100px;
  height: 150px;
}
.short {
  background-color: red;
  width: 100px;
  height: 100px;
}

对应的HTML需要将div放入容器中：

<div class="container">
  <div class="medium"></div>
  <div class="tall"></div>
  <div class="short"></div>
</div>

方法3：使用Grid布局 #

Grid布局同样能轻松实现需求，通过父容器定义列布局即可：

.container {
  display: grid;
  grid-template-columns: repeat(3, 100px); /* 定义三列，每列宽度100px */
}
.tall {
  background-color: blue;
  height: 200px;
}
.medium {
  background-color: green;
  height: 150px;
}
.short {
  background-color: red;
  height: 100px;
}

HTML同样需要容器包裹：

<div class="container">
  <div class="medium"></div>
  <div class="tall"></div>
  <div class="short"></div>
</div>

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