1

2列に整理したい10個のdivが次々にあります。問題は、それらをすべてフロートすると、次の列が得られることです。

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

3 に答える 3

3

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 をサポートするには、2 つの列を手動でラップし、適切にスタイルを設定することもできます。ジェネレーターに飛び込みたくない場合-テンプレートシステムがそれを解決するはずです-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">');
)};
于 2013-01-14T08:53:47.943 に答える
1

持っているアイテムを次のように 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>
于 2013-01-14T08:53:38.910 に答える
0

想定

1 2
3 4
5 6
7 8
9 10

あなたの複雑なシステムから来ている (あなたが実際に何を言いたいのかわからない) 場合、これらがどのようdivに生成されているかを確認する必要があります。望ましい結果を得るには、コードに非常に小さな変更があると思います。

または、ループを使用して必要な構造を取得できます。

于 2013-01-14T08:37:41.933 に答える