时间戳

首页 > 解决方案 > 多列布局的 CSS 正确 li 顺序

css - 多列布局的 CSS 正确 li 顺序

问题描述

我有以下代码，并试图找出使 4 列成为必要的最佳方法。

<ul>
  <li class="first-column">row1 column1</li>
  <li class="first-column">row2 column1</li>
  <li class="first-column">row3 column1</li>
  <li class="second-column">row1 column2</li>
  <li class="second-column">row2 column2</li>
  <li class="third-column">row1 column3</li>
  <li class="forth-column">row1 column4</li>
</ul>

通常我会使用下面的 css 来解决这个问题，但这并不能以正确的顺序维护 li（前 3 个 li 在第一列中）。

 .first-column, .second-column, .third-column, .forth-column {
   width:25%;
   float: left; 
 }

标签： csslayoutpositionhtml-listsmultiple-columns

解决方案

听起来像是 CSS 网格作业：

ul {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-flow: column;
}

.first-column {
  grid-column: 1;
}

.second-column {
  grid-column: 2;
}

.third-column {
  grid-column: 3;
}

.forth-column {
  grid-column: 4;
}
<ul>
  <li class="first-column">row1 column1</li>
  <li class="first-column">row2 column1</li>
  <li class="first-column">row3 column1</li>
  <li class="second-column">row1 column2</li>
  <li class="second-column">row2 column2</li>
  <li class="third-column">row1 column3</li>
  <li class="forth-column">row1 column4</li>
</ul>

推荐阅读