如何批量上下定位多个div元素？

针对你想批量实现div上下定位、不用逐个设置位置的需求，推荐以下几种高效方案：

1. Flexbox（最简便的垂直布局方案） #

给父容器添加Flexbox属性，所有子div会自动垂直排列，还能轻松调整间距和对齐方式：

/* 父容器样式 */
.div-container {
  display: flex;
  flex-direction: column; /* 指定垂直排列方向 */
  gap: 12px; /* 子div之间的间距，可按需修改 */
  /* 可选：控制水平对齐，比如居中 */
  align-items: center;
}

/* 子div通用样式，按需自定义 */
.div-container div {
  width: 220px;
  height: 60px;
  background: #eee;
  border-radius: 4px;
}

只需给父容器设置一次，所有子div都会遵循垂直排列规则，不需要单独定位每个元素。

2. CSS Grid（适合需要更灵活布局的场景） #

如果后续可能需要调整布局结构（比如增加列数），Grid是更好的选择：

.div-container {
  display: grid;
  grid-template-columns: 1fr; /* 单列布局 */
  gap: 12px; /* 子元素间距 */
}

.div-container div {
  width: 220px;
  height: 60px;
  background: #eee;
}

Grid会自动将子元素按垂直方向排列，扩展性更强。

3. 传统margin方法（兼容性拉满） #

如果需要兼容非常旧的浏览器，可以用统一的margin实现：

.div-container div {
  width: 220px;
  height: 60px;
  background: #eee;
  margin-bottom: 12px; /* 每个div底部留间距 */
}

/* 移除最后一个div的底部间距，避免多余空白 */
.div-container div:last-child {
  margin-bottom: 0;
}

这种方法不需要依赖现代布局属性，但灵活性不如前两种。

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