如何使水平排列的Div行保持整齐对齐？

这个float布局导致的错位问题我简直太熟了！之前做项目也碰到过好几次，给你几个实用的解决办法，从现代布局到传统兼容方案都有：

1. 用Flexbox布局（最推荐，简单省心） #

Flexbox是现在前端布局的首选方案，能彻底解决这种高度不一致导致的错位问题，而且代码简洁：

首先给所有子div套一个父容器，然后给父容器设置Flex属性：

/* 父容器样式 */
.card-container {
  display: flex;
  flex-wrap: wrap; /* 自动换行 */
  gap: 12px; /* 子元素之间的间距，比padding更灵活 */
}

/* 子元素样式 */
.card-container div {
  flex: 1 1 30.33%; /* 自动缩放，占比30.33%，最小宽度保持设置值 */
  min-width: 150px;
  padding: 6px;
  box-sizing: border-box; /* 确保padding不会撑大元素宽度 */
}

对应的HTML结构：

<div class="card-container">
  <div>
    <h3>title</h3>
    <p>whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever whatever</p>
  </div>
  <!-- 其他所有子div都放在这里面 -->
</div>

Flexbox会自动让每一行的元素高度对齐，不管单个元素内容多少，换行的时候也不会出现错位，完美解决你的问题。

2. 用CSS Grid布局（适合更规整的网格场景） #

如果你的布局是更标准的网格样式，CSS Grid也是个好选择，同样能避免错位：

.card-container {
  display: grid;
  /* 自动填充列，最小宽度150px，最大占比30.33% */
  grid-template-columns: repeat(auto-fill, minmax(150px, 30.33%));
  gap: 12px;
}

.card-container div {
  padding: 6px;
  box-sizing: border-box;
}

HTML结构和上面一样，Grid会把元素自动分配到网格中，每行的高度会统一，完全不会出现错位情况。

3. 传统Float布局的兼容方案（如果必须用Float） #

如果因为旧浏览器兼容问题不能用现代布局，也可以用这个办法来修复错位：

首先给父容器添加 clearfix 清除浮动（避免父容器高度塌陷）：

.card-container::after {
  content: "";
  display: table;
  clear: both;
}

然后给每行的最后一个元素添加clear: left，比如你每行放3个元素，就给第3、6、9...个元素设置：

.card-container div:nth-child(3n) {
  clear: left;
}

子元素还是用你原来的Float样式：

.card-container div {
  float: left;
  width: 30.33%;
  min-width: 150px;
  padding: 6px;
  box-sizing: border-box;
}

不过这个方法有个缺点：当窗口宽度变化导致每行元素数量改变时，这个规则就会失效，所以不如现代布局灵活。

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