更改列表安排 - HTML＆安培; CSS [英] Change list arrangement - HTML & CSS

问题描述

我有列表如下图所示。

 ＆LT; UL＆GT;
  ＆LT;李＆GT; 1 LT; /李＆GT;
  ＆LT;李＆GT; 2'; /李＆GT;
  ＆LT;立GT;第3版; /李＆GT;
  ＆LT;立GT; 4℃; /李＆GT;
  ＆LT;立GT; 5℃/李＆GT;
  ＆LT;立GT; 6≤/李＆GT;
  ＆LT;李＆GT; 7 LT; /李＆GT;
  ＆LT;立GT; 8示/李＆GT;
＆LT; / UL＆GT;
 

如何榜上无名安排这样的。

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

或

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

我需要这样的安排是因为我使用的角度 NG-重复，所以我需要每一个数字都有相同的元素。我不介意，如果你们使用其他元素给出答案，但每个数字必须有相同的元素。谢谢

P / S：数量会增加滚动的时候，像无限滚动。

解决方案

您可以将您的内容分成两列。

\r

\r

UL {\r
    -webkit列计数：2;\r
    -moz列计数：2;\r
    列数：2;\r
    -webkit-列差距：30％;\r
    -moz-列差距：30％;\r
    列差距：30％;\r
    宽度：100％;\r
}\r
\r
李{\r
    显示：inline-block的;\r
    宽度：35％; / *（母公司100％ - 父母差距30％）/列* /\r
}

\r

＆LT; UL＆GT;\r
  ＆LT;李＆GT; 1 LT; /李＆GT;\r
  ＆LT;李＆GT; 2'; /李＆GT;\r
  ＆LT;立GT;第3版; /李＆GT;\r
  ＆LT;立GT; 4℃; /李＆GT;\r
  ＆LT;立GT; 5℃/李＆GT;\r
  ＆LT;立GT; 6≤/李＆GT;\r
  ＆LT;李＆GT; 7 LT; /李＆GT;\r
  ＆LT;立GT; 8示/李＆GT;\r
＆LT; / UL＆GT;

\r

\r

\r

当你有8个或更少里项目上面解决方案的工作。结果

但是，如果项目的数量是未知的，则可以将一个类弄清楚的列数。
例如，假设你有你的角模型中的变量 qtItems 。你可以做这样的事情：

 ＆LT; UL纳克级='关口'+ Math.ceil（qtItems / 4）＆GT;
 

然后使用CSS为每一个类：

  UL {
    宽度：100％;
}
UL李{
    显示：inline-block的;
}ul.col2 {
    -webkit列计数：2;
    -moz列计数：2;
    列数：2;
    -webkit-列差距：30％;
    -moz-列差距：30％;
    列差距：30％;
}ul.col2李{
    宽度：35％;
}ul.col3 {
    -webkit列计数：3;
    -moz列计数：3;
    列数：3;
    -webkit-列差距：20％;
    -moz-列差距：20％;
    列差距：20％;
}ul.col3李{
    宽度：20％;
}ul.col4 {
    -webkit-列数：4;
    -moz-列数：4;
    列数：4;
    -webkit-列差距：10％;
    -moz-列差距：10％;
    列差距：10％;
}ul.col4李{
    宽度：15％;
}
 

I got list like below

<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

or

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

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: the number will increase when scroll, like infinite scroll.

解决方案

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>

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

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

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