如何实现Div元素错落排列？基于Bootstrap的布局求助

你想要让带col-lg-6的不等高div实现错落填充的瀑布流效果对吧？默认Bootstrap栅格是按行排列的，高元素会把下一行元素挤到下方留空，你当前的inline-block设置只能让元素顶对齐，没法解决空白填充的问题，我给你两个靠谱的解决方案：

先理下你的现状 #

• 所有目标元素都带有col-lg-6类，默认两列布局，但元素高度不一致
• 你尝试的CSS代码：

.div_class { 
  position: relative; 
  vertical-align: top; 
  text-align: center; 
  display: inline-block; 
  margin-top: 10px; 
}

方案1：纯CSS Column布局（无需插件）

直接用CSS列布局替代Bootstrap栅格的行排列逻辑，自动实现错落填充：

1. 给父容器添加列布局样式：

.parent-container {
  column-count: 2; /* 固定两列 */
  column-gap: 20px; /* 列间距，对应Bootstrap的 gutter */
}

2. 调整子元素样式，避免被列分割：

.div_class {
  break-inside: avoid; /* 禁止元素被列截断 */
  margin-bottom: 15px; /* 元素垂直间距 */
  text-align: center;
  /* 移除之前的inline-block、position:relative等可能冲突的样式 */
}

要保留响应式的话，加个媒体查询：

@media (max-width: 991px) {
  .parent-container {
    column-count: 1; /* 小屏幕自动切换为单列 */
  }
}

方案2：用Bootstrap官方推荐的Masonry插件（兼容栅格）

如果想继续保留Bootstrap的col-lg-6栅格逻辑，用Masonry这个专门的瀑布流插件最稳妥：

1. 引入Masonry的JS文件（可以用CDN资源）
2. 给父容器添加Masonry的配置属性：

<div class="row" data-masonry='{"percentPosition": true }'>
  <div class="col-lg-6 div_class">...</div>
  <div class="col-lg-6 div_class">...</div>
  <!-- 其他所有目标div -->
</div>

3. 调整子元素样式，移除冲突属性：

.div_class {
  vertical-align: top;
  text-align: center;
  margin-top: 10px;
  /* 删掉display: inline-block，避免和栅格布局冲突 */
}

为什么你之前的CSS没达到预期？ #

Bootstrap的col-lg-6本身是基于Flex/Float的行级布局，你加的display: inline-block只是让元素在当前行顶对齐，但元素还是会严格按行排列，没法自动填充上方的空白区域，所以必须用专门的瀑布流布局方案才能实现你要的错落效果。

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