Question

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

但我希望得到这些专栏：

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

标记很简单：

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

Answer 1

您可以使用column-count和column-gap CSS属性。 Mozilla和Webkit都需要前缀，IE10和Opera都不需要。但是，IE＆lt; = 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

假设

来自你复杂的系统（不确定你真正想说的是什么），你将不得不看看这些div是如何生成的，我猜，代码中会有非常小的变化来帮助你期望的结果

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

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

3 个答案: