1

一連の div を垂直に分割したい:

私の HTML は次のようになります。

<div>A</div>
<div>B</div>
...
<div>G</div>

私は彼らがこのように見えるようにしたい

A D G
B E
C F

要素の数は任意であり、複雑さが大幅に増加するため、可能であれば特定の div に余分な属性を追加する必要は避けたいと考えています。

CSS3 列オプションを見てきましたが、CSS3 なしでこれを行う方法はありますか? Javascript ライブラリも避けたいと思います。

4

2 に答える 2

2

動的にしたいと仮定すると、CSS3 列または JS (プラグインなど) に依存せずにそのようなレイアウトを複製する適切な方法はありません。

float と指定された幅を使用するという tbowman の提案は、アイテムの順序が異なる結果になります。

A B C
D E F
G

ただし、jquery を使用できれば、これは完全にうまく機能します。アイテムを並べ替える必要に応じて項目を列にラップします (ロジックはバニラ JavaScript で複製できます)。AJAX を使用してこのコンテンツを取得し、コンテンツを DOM に追加する前に列にラップして、煩わしいちらつきがないようにする場合のボーナス ポイントです。

var $container = $('#container'); //assuming this is the parent
var $content = $container.children();
var itemsPerColumn = (Math.ceil($content.length / 3));
for (var i = 0; i < 3; i++) {
    $content.slice(i * itemsPerColumn, (i + 1) * itemsPerColumn)
    .wrapAll('<div class="column" />');
}

比較のために遅延レンダリングをいじっています。何らかの理由でjsが失敗した場合、ページは「通常の」レイアウトで引き続き使用できます。

于 2012-06-22T00:56:30.407 に答える
-1

CSS3 を使用しない場合、すべての div で幅を指定し、改行が必要な場合はいつでもクラス ".clear" を含めることをお勧めします。

.clear { clear:both; display:block; height:0; }

次に、Athis は次の行にあると言えます。幅については、CSS3 が必要ない場合は、定義済みの幅を持つ css クラスを使用できます。

于 2012-06-21T23:37:09.403 に答える