如何实现两个DIV在同一起始水平位置并排对齐？

方法1：使用Flexbox布局（推荐） #

给父容器添加Flex属性，通过align-items: flex-start强制子元素从垂直方向的起始位置对齐，不受内容长度影响：

.parent-container {
  display: flex;
  align-items: flex-start; /* 核心：让子盒子顶部对齐 */
  gap: 12px; /* 可选：设置两个盒子的间距 */
}

.child-div {
  /* 可按需设置宽度，比如固定值或百分比 */
  /* width: 220px; */
}

原理：Flexbox的align-items属性控制交叉轴（垂直方向）上的对齐方式，flex-start会让所有子元素锚定到交叉轴的起始点，保证水平起始位置一致。

方法2：使用Grid布局 #

通过Grid的列布局配合align-items: start实现对齐，适合需要更复杂网格场景的情况：

.parent-container {
  display: grid;
  grid-template-columns: auto auto; /* 两列宽度随内容自适应 */
  align-items: start; /* 确保子盒子顶部对齐 */
  gap: 12px;
}

方法3：传统浮动方案（兼容旧浏览器） #

如果需要兼容低版本浏览器，可使用浮动+垂直对齐，但需处理父容器高度塌陷问题：

.parent-container::after {
  content: "";
  display: table;
  clear: both; /* 清除浮动，避免父容器高度塌陷 */
}

.child-div {
  float: left;
  vertical-align: top; /* 核心：强制顶部对齐 */
  margin-right: 12px; /* 设置盒子间距 */
}

注意：浮动布局易引发布局异常，优先选择Flex或Grid方案。

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