Question

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

function getDeviceInfo(deviceName) {
    var obj = {};
    data.devices.some(function (a) {
        if (a.Name === deviceName) {
            obj[deviceName] = {
                Bytes_Read: a.output.Bytes_Read,
                Bytes_Written: a.output.Bytes_Written
            };
            return true;
        }
    });
    return obj;
}

var data = {
        "devices": [{
            "Name": "bdev0",
            "output": {
                "IO_Operations": 0,
                "Bytes_Read": 0,
                "Bytes_Written": 0
            }
        }, {
            "Name": "bdev1",
            "output": {
                "IO_Operations": 10,
                "Bytes_Read": 20,
                "Bytes_Written": 30
            }
        }]
    },
    div_one = getDeviceInfo('bdev0'),
    div_two = getDeviceInfo('bdev1');

document.write('<pre>' + JSON.stringify(div_one, 0, 4) + '</pre>');
document.write('<pre>' + JSON.stringify(div_two, 0, 4) + '</pre>');

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

但是我想要6个或更多元素：

1    4
2    5
3    6

我使用css3，html，bootstrap 2.3.2和jquery 有没有人有最好的方法可以做到这一点？

Answer 1

您只需过滤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 2

如果您能够使用CSS网格，则可以使用grid-template-rows和grid-auto-flow指令来实现。网格可以在大多数浏览器中本机使用，也可以在带有autoprefixer的IE11中使用：

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

jQuery方法

此方法使用jQuery计算有多少元素，并根据其是否为6或更多来添加类。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

CSS数据属性

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

＆＃13;

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

＆＃13;

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

＆＃13;

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：在OPs示例的具体情况中：

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 */
}

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

4 个答案:

jQuery方法

CSS数据属性