2011-12-15 7 views
1

の高さに基づいて、列のサポートを浮動してスタッキングが、ちょうど私がDIV私はこれが可能であると思ういけないコンテナ

は、簡単な例を取ることができます最後の手段として尋ねるだろうと思って、あなたには、いくつかのDIVのは、上に積み重ね持っていると言うことができますお互いのディスプレイを使用して次のようになるように積み重ねられたdivの可変数は、彼らが左から右の列の形で包むでしょうそのコンテナの高さよりも高くした場合、ブロック

XXXXXXXXXXX1 
XXXXXXXXXXX2 
XXXXXXXXXXX3 
XXXXXXXXXXX4 
XXXXXXXXXXX5 
XXXXXXXXXXX6 
XXXXXXXXXXX7 
XXXXXXXXXXX8 
XXXXXXXXXXX9 
XXXXXXXXXX10 
XXXXXXXXXX11 
XXXXXXXXXX12 
XXXXXXXXXX13 
XXXXXXXXXX14 

はどのようにしてそれを作るのでしょうか?例えば:私は、それぞれのdivは、独立して移動する必要があるだろう

XXXXXXXXXXX1 XXXXXXXXXXX6 XXXXXXXXXX11 
XXXXXXXXXXX2 XXXXXXXXXXX7 XXXXXXXXXX12 
XXXXXXXXXXX3 XXXXXXXXXXX8 XXXXXXXXXX13 
XXXXXXXXXXX4 XXXXXXXXXXX9 XXXXXXXXXX14 
XXXXXXXXXXX5 XXXXXXXXXX10 

ので列として機能するコンテナdivを使用して、コンテナの上に水平方向のスクロールをdiv要素のないラップを強制しないと許可の短い本当に可能か優雅イマイチ?

これは、アイテムをリストとして表示するとき、これはWindowsエクスプローラと同じ動作になると思います。

これで助けになるCSS3のプロパティがいくつかありますが、純粋なCSSやjqueryなどであれば、クロスブラウザの方法があるかどうか確認したいと思います。

私はあなたの考えを歓迎します。

よろしく

ですから、あなたがこの

例を達成するためにjqueryのを使用することができます必要なものを見J.

答えて

2

はここhttp://jsfiddle.net/h8Bqw/4/

var height = $(".container").height(); 
var count = 1; 
$(".outPut").append("<div class='row r"+count+"'></div>"); 

$(".container div").each(function(index) { 
    $(".r"+count).append($(this)); 


    if($(".r"+count).height() > height){ 
     count++; 
     $(".r"+count).remove($(this)); 
     $(".outPut").append("<div class='row r"+count+"'></div>"); 
     $(".r"+count).append($(this)); 
     } 
+0

非常に賢いです!それだけのことは、ウィンドウがレンダリング後にサイズ変更された場合、それは優雅に劣化しないということです。たとえば、2列に収まるようにウィンドウのサイズを変更すると、div 5はdiv 2の下に動きます。 onresizeなど - とてもうまくいった! – HeavenCore

+0

プロンプトなしこれは簡単なサンプルであり、あなたのニーズに合わせて再加工できると確信しています。 –

関連する問題