如何解决CSS中卡片层叠错位问题 实现新闻区块错落排布效果

错落排布新闻区块（瀑布流）解决方案 #

你遇到的层叠错位问题核心原因是absolute定位会让元素完全脱离正常文档流，手动计算位置不仅容易出错，窗口尺寸变化后还会直接失效，完全不需要用这种方案实现错落排布效果，直接用原生CSS布局即可，以下是两种成熟实现方案：

方案1：CSS多列布局（实现最简单，适配性强） #

不需要设置两个行容器，直接用一个父容器包裹所有新闻区块即可：

<!-- HTML结构 -->
<div class="news-wrapper">
  <div class="news-item">新闻内容1</div>
  <div class="news-item">新闻内容2</div>
  <div class="news-item">新闻内容3</div>
  <!-- 所有新闻区块都放在父容器内即可 -->
</div>

对应CSS样式：

.news-wrapper {
  /* 分为2列，和你预期的排布一致 */
  column-count: 2;
  /* 两列之间的间距，可根据需求调整 */
  column-gap: 24px;
}

.news-item {
  /* 禁止单个新闻区块被截断拆分到两列 */
  break-inside: avoid;
  /* 同列上下两个新闻区块的间距，可根据需求调整 */
  margin-bottom: 24px;
  /* 你原本写的news-box样式（背景、圆角、内边距等）直接保留即可 */
}

方案2：CSS Grid布局（可控性更高，支持自定义区块尺寸） #

如果后续需要调整部分新闻块的宽高占比，更推荐用Grid布局：

.news-wrapper {
  display: grid;
  /* 两列等宽 */
  grid-template-columns: 1fr 1fr;
  /* 行列间距统一设置，也可以分别用row-gap、column-gap单独设置 */
  gap: 24px;
  /* 自动填补排布空白，实现错落效果 */
  grid-auto-flow: dense;
}

.news-item {
  /* 你原本写的news-box样式直接保留即可 */
  /* 如果需要让某个新闻块占更高高度，可添加属性：grid-row-end: span 2; */
}

两种方案都不需要手动计算每个区块的位置，会自动根据每个新闻块的高度适配排布，不会出现层叠错位问题，响应式适配也只需要调整列数参数即可。

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