更改列表排列 - HTML &CSS [英] Change list arrangement - HTML & CSS

问题描述

我得到了如下列表

<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>

如何让列表排列成这样.

How do make the list arrangement to like this.

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

或

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

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

I need this arrangement because i'm using angular ng-repeat, so i need every number has the same element. I dont mind if you guys give the answer using other element, but every number must have same element. Thanks

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

p/s: the number will increase when scroll, like infinite scroll.

推荐答案

您可以将内容分成 2 列.

You can split your content into 2 columns.

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 项时，上述解决方案有效.

The solution above works when you have 8 or less li items.

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

But if the number of items is unknown, you can place a class to figure out the number of columns. For example, consider you have in your angular model a variable qtItems. You can do something like this:

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

然后为每个类使用 CSS:

Then use CSS for each class:

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%;
}

这篇关于更改列表排列 - HTML &CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！