如何在不使用CSS columns或column-count属性的情况下创建上下连续的列

需求说明 #

要实现两列垂直排列的布局（左列依次显示1、3、5、7，右列依次显示2、4、6、8），但必须避免使用columns、column-count和grid-template-rows: masonry属性，因为页面需要支持PDF渲染，这些属性无法被PDF兼容。

你当前尝试的浮动代码会按行排列内容（12、34、56、78），不符合预期效果：

.container{max-height: 200px;}
.item{width: 50%;float: left;}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
</div>

解决方案 #

最兼容PDF渲染的方式是拆分内容到两个独立的列容器，结构简单且渲染稳定：

代码示例 #

.container {
  max-height: 200px;
}
.column {
  width: 50%;
  float: left;
  box-sizing: border-box; /* 防止宽度溢出 */
}
.item {
  /* 按需添加样式，比如内边距、边框 */
  padding: 8px;
}

<div class="container">
  <!-- 左列容器 -->
  <div class="column">
    <div class="item">1</div>
    <div class="item">3</div>
    <div class="item">5</div>
    <div class="item">7</div>
  </div>
  <!-- 右列容器 -->
  <div class="column">
    <div class="item">2</div>
    <div class="item">4</div>
    <div class="item">6</div>
    <div class="item">8</div>
  </div>
</div>

如果是动态生成的内容，不管是后端渲染还是前端JS处理，只需把奇数项放进左列容器、偶数项放进右列容器即可，完全不依赖PDF不兼容的CSS属性。

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