如果元素数量超过 X，CSS/html 在两列中显示列表？

Question

我有一个动态的元素列表。 我不希望这个列表太长。 我可以使用：

ul {
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
}

但这总是导致两列。如果列表中只有几个元素，我宁愿只有一列。 所以有 5 个或更少的元素，我想要这个：

1 2 3 4 5 但是有 6 个或更多元素我想要这个：

1 4
2 5
3 6

我使用 css3、html、bootstrap 2.3.2 和 jquery 有没有人有一些关于最好的方法的提示？

Answer 1

如果您能够使用 CSS 网格，您可以使用 grid-template-rows 和 grid-auto-flow 指令来做到这一点。 Grid 可以在大多数浏览器中原生使用，也可以在 IE11 中使用autoprefixer：

.list {
  display: grid;
  grid-template-rows: repeat(5, min-content);
  grid-auto-flow: column;
}

<ul class="list">
  <li class="item">1</li>
  <li class="item">2</li>
  <li class="item">3</li>
  <li class="item">4</li>
  <li class="item">5</li>
  <li class="item">6</li>
  <li class="item">7</li>
</ul>

Answer 2

您可以简单地过滤 ul 元素：

$('ul').filter(function(){
    return this.childNodes.length > 5
}).addClass('twoColumns');

ul.twoColumns {
  list-style: none;
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

Answer 3

jQuery 方法

此方法使用 jQuery 计算元素的数量，并根据元素是否为 6 或更多添加一个类。

$(document).ready(function() {
  $('ul').each(function() {
    if ($(this).children().length > 5) {
      $(this).addClass('column');
    }
  });
});

ul.column {
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

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

---

CSS 数据属性

如果您可以设置数据属性，则可以在 CSS 中读取该属性以计算结果。

ul[data-count="even"] {
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
}

<ul data-count="odd">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

<ul data-count="even">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

Answer 4

这是一个纯 CSS 的解决方案：http://alistapart.com/article/quantity-queries-for-css

本文深入解释了如何完成您想要构建的内容。

编辑：示例！ 所以我们的想法是在 ul 中的第 6 个列表项之后对 lis 进行不同的样式设置 - 否则的话：当有超过 5 个元素时，我们想要更改布局。可能的纯 CSS 解决方案：

ul li {
  color: blue;
}

ul li:nth-child(n+6) { /* targeting all elements form the 6th on */
  color: red;
}

当然，这是假设最多有 12 个项目，否则整个概念就会崩溃，或者你最终会得到 6 个蓝色的项目和红色的 n 个元素。 无论如何，这肯定会奏效，并且是 OP 问题的答案（也许不是 答案）。

Edit2：在 OP 示例的特定情况下：

ul li {
  float: left; /* list items float left */
  width: 50%;
}

ul li:nth-child(n+4) {
  float: right; /* from the fourth list item on they float right */
}