如何动态设置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 可以在 php 循环生成这些 div.

时对我有好处

Answer 1

您可以使用 CSS3 column-count 属性，如果需要，可以使用 JQuery

动态更改列数

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

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

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