Javascript 如何将div动态设置为多行两列

第二排

1    6
2    7
3    8
4    9
5    10

这意味着上一行结束的地方，下一行将从那里开始

---

如果php循环生成这些div时可以使用php，这对我来说将是有益的。

您可以使用CSS3

column count

属性，如果需要，可以使用JQuery动态更改列数

.parent{
-webkit列数：2；/*Chrome、Safari、Opera*/
-moz列计数：2；/*Firefox*/
列数：2；
}

1.
2.
3.
4.
5.
6.
7.
8.
10
11
12

试试这个

11    16
12    17
13    18
14    19
15    20
21

---

您需要设置条件来检查行是否以10结尾，除非它不起作用。

我会修改输出服务器端，但因为您用jQuery标记了这个问题，所以可以用JS修改DOM

  .col{
    width: 50%;
    float: left;
  }

---

感谢您的反馈。我以前用过这个，但我希望第一排从10开始，第二排从11开始。谢谢Bogdan Kuštan先生。您的代码运行良好。起初我的问题已经解决了。但当这些div生成时，我将尝试用PHP解决这个问题。@shohaghan PHP具有

array\u chunk

函数

  .col{
    width: 50%;
    float: left;
  }

$parent = $('.parent');
$items = $parent.find('.col');
chunk = 10;
chunks = [];
for (i=0,j=$items.length; i<j; i+=chunk) {
    chunks.push($items.slice(i,i+chunk));
}

$parent.html('');
$.each(chunks, function(){
    $chunk = $('<div />');
  $chunk.addClass('chunk');
  $chunk.append($(this));
  $parent.append($chunk);
});

.parent .chunk {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    border-bottom: 1px solid black;
}