不使用JavaScript如何在旧版浏览器模拟CSS column实现单元素多列布局

可以实现，无需JavaScript，可兼容不支持原生CSS column 属性的旧版本浏览器，且完全不需要修改你提供的单个HTML元素结构。

方案1：原生column属性（降级兼容写法） #

如果仅需要兼容近10年的浏览器，直接用带私有前缀的多列属性即可，旧版本浏览器会自动忽略不识别的属性，可以配合方案2做降级：

.columns {
  /* 兼容Webkit内核旧浏览器 */
  -webkit-columns: 3;
  -webkit-column-gap: 40px;
  /* 兼容火狐旧浏览器 */
  -moz-columns: 3;
  -moz-column-gap: 40px;
  /* 标准写法 */
  columns: 3;
  column-gap: 40px;
  /* 固定行高保证内容对齐 */
  line-height: 24px;
}

方案2：全兼容占位浮动方案（兼容IE6及以上） #

如果需要兼容非常古老的浏览器，可以利用伪元素插入浮动占位块，把文本挤成三列布局，原理是固定每列最多容纳4行内容，两个占位块的高度刚好等于4行的总高度，自然分割出三列的排列空间。如果需要兼容IE6/7，把伪元素的双冒号::改为单冒号:即可。

.columns {
  /* 总宽度 = 3*列宽 + 2*列间距，可自行调整数值 */
  width: 380px;
  line-height: 24px;
  overflow: hidden;
}
/* 插入两个浮动占位块分割列空间 */
.columns::before, .columns::after {
  content: "";
  float: left;
  /* 单列宽度 */
  width: 100px;
  /* 4行内容的总高度，刚好撑满第一列高度 */
  height: 96px;
  /* 列间距 */
  margin-right: 40px;
}
.columns::after {
  margin-right: 0;
}

两种方案最终都可以实现你需要的布局效果：

A        E        I
B        F        J
C        G
D        H

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