如何使CSS columns布局的两列UL奇数项列表位于右侧列？

可以实现，这里提供两种实用方案：

方案1：利用CSS columns的平衡填充特性 #

默认情况下，columns属性会采用column-fill: balance（隐式默认行为）来平衡各列的内容量，当列表项为奇数时，数量较多的列会自动分布在右侧。但如果你的容器设置了固定高度，浏览器会切换为column-fill: auto（优先填满左侧列），这时候只需显式指定column-fill: balance，同时确保容器没有固定高度限制，让浏览器自动计算列高即可：

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-fill: balance; /* 显式开启平衡填充，保证奇数项多的列在右侧 */
}

方案2：用Flexbox模拟两列（更灵活可控） #

如果columns的表现不符合预期，也可以用Flexbox实现，通过反向排列让多的项落在右侧：

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse; /* 反转排列顺序 */
}
ul li {
  width: 50%; /* 每个列表项占容器一半宽度 */
  box-sizing: border-box; /* 避免内边距/外边距撑破宽度 */
}

这种方式下，5个列表项会自动排列为右侧3个、左侧2个，完全满足你的需求。

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