jquery - 将 div 组织到 2 列 - css 或 jquery

Question

我有 10 个 div 一个接一个，我想在 2 列中组织。问题是，如果我将它们全部浮动，我会得到这些列：

1 2
3 4
5 6
7 8
9 10

但相反，我想获得这些列：

1 6
2 7
3 8
4 9
5 10

这只能通过css来实现吗？如果没有，可以做到这一点的最有效的 jquery 是什么？（我不想触摸标记，因为它是由复杂系统生成的......）

标记很简单：

<div class="item">
...
</div>
<div class="item">
...
</div>
...

Answer 1

您可以使用column-count和column-gapCSS 属性。Mozilla 和 Webkit 都需要前缀，IE10 和 Opera 不需要。但是，IE<=9 根本不支持。

就像是

.item-parent{
  column-count: 2;
  column-gap: 20px;
  -moz-column-count: 2;
  -webkit-column-count: 2;
  /*...*/
}

http://www.quirksmode.org/css/multicolumn.html
http://caniuse.com/#feat=multicolumn

或者，要支持 IE9，您可以手动包装两列并适当地设置样式。如果你不想深入研究生成器——模板系统应该已经解决了这个问题——你可以使用 Javascript：

$('.item-parent').each(function(){
  $items = $('.item', this);
  $items.slice(0, ($items.length+1)/2) //split in half, round up
    .wrapAll('<div class="item-column">');
  $items.slice(($items.length+1)/2)
    .wrapAll('<div class="item-column">');
)};

Answer 2

将您拥有的项目放在两个 DIV 中，如下所示

<style>
.col{
    float:left;
    width:50%;
}
</style>

<div class="col">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
</div>
<div class="col">
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
</div>

Answer 3

假设

1 2
3 4
5 6
7 8
9 10

来自您的复杂系统（不确定您实际上想说什么），您将不得不看看这些div是如何生成的，我猜，代码中会有非常小的变化以获得您想要的结果

或者，您可以使用循环来获取所需的结构..