更改列表排列 - HTML和CSS

Question

我得到如下列表

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
</ul>

如何使列表安排像这样.

 1  2    5  6    9  10
 3  4    7  8   11  ....etc

要么

 1  3    5  7     9 11
 2  4    6  8    10 .... etc 

我需要这种安排,因为我使用角度ng-repeat,所以我需要每个数字都有相同的元素.我不介意你们是否使用其他元素给出答案,但每个数字必须具有相同的元素.谢谢

p/s:滚动时数字会增加,就像无限滚动一样.

Answer 1

您可以将内容拆分为2列.

ul {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 30%;
    -moz-column-gap: 30%;
    column-gap: 30%;
    width: 100%;
}

li {
    display: inline-block;
    width: 35%; /* (parent 100% - parent gap 30%) / columns */
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
</ul>

当您有8个或更少的li项目时,上述解决方案有效.

但是如果项目数量未知,您可以放置​​一个类来计算列数.例如,假设您在角度模型中有一个变量qtItems.你可以这样做:

<ul ng-class = "'col' + Math.ceil(qtItems/4)">

然后为每个类使用CSS:

ul {
    width: 100%;
}
ul li {
    display: inline-block;
}

ul.col2 {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 30%;
    -moz-column-gap: 30%;
    column-gap: 30%;
}

ul.col2 li {
    width: 35%;
}

ul.col3 {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 20%;
    -moz-column-gap: 20%;
    column-gap: 20%;
}

ul.col3 li {
    width: 20%;
}

ul.col4 {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
    -webkit-column-gap: 10%;
    -moz-column-gap: 10%;
    column-gap: 10%;
}

ul.col4 li {
    width: 15%;
}