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

Question

<div class="parent">
  <div class="col">1</div>
  <div class="col">2</div>
  <div class="col">3</div>
  <div class="col">4</div>
  <div class="col">5</div>
  <div class="col">6</div>
  <div class="col">7</div>
  <div class="col">8</div>
  <div class="col">10</div>
  <div class="col">11</div>
  <div class="col">12</div>
</div>

将使用php动态生成列，我想根据需要拆分这两列和多行。我怎么能这样做。

我希望它会是这样的。

第一行

1    6
2    7
3    8
4    9
5    10

第二行

11    16
12    17
13    18
14    19
15    20
21

这意味着前一行结束，下一行将从那里开始。

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

Answer 1

您可以使用CSS3 column-count属性，如果需要，可以使用JQuery动态更改列数

＆＃13;

＆＃13;

.parent {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
}

＆＃13;

<div class="parent">
  <div class="col">1</div>
  <div class="col">2</div>
  <div class="col">3</div>
  <div class="col">4</div>
  <div class="col">5</div>
  <div class="col">6</div>
  <div class="col">7</div>
  <div class="col">8</div>
  <div class="col">10</div>
  <div class="col">11</div>
  <div class="col">12</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

试试这个

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

Answer 3

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

Answer 4

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

$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);
});

和CSS：

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

demo fiddle