2

コンテナ内に同じだが異なる複数の<div>タグがあります。ブラウザがあり、要素が再配置されると、それらの間に多くのスペースが入ります。たとえば、次の HTML:widthheightresized<div>

<div class="wrap">
    <div class="box">
        This has less height
    </div>
    <div class="box">
        This has more height
    </div>
    <div class="box">
        This has less height.
    </div>
</div>

ブラウザーのサイズが変更されると、最後の div が最初の div の下の左側に移動しますが、中央の div の高さが大きいため、それらの間に空のスペースがあります。画像をご覧ください。

ここに画像の説明を入力 純粋な CSS を使用してこれらの div を配置することは可能ですか? 方法が見つからなかったので、 jQuery を試してみmasonry pluginましたが、問題なく動作しますが、問題は、応答が遅いことが多いことです (たとえば、最初にページを開いたときに、レイアウトが完全にめちゃくちゃになっていますが、ページを更新すると、ページはうまくいきます）。

したがって、CSS のみでは不可能な場合、複雑なプラグインなしで動作させる方法はありますか (たとえば、jQuery のみを使用しますか?)

jsFiddle: http://jsfiddle.net/HS2Zh/

4

2 に答える 2

1

あなたの探求がギャップを取り除くことであるならば、あなたはこのコードを使うことによってこれを取り除くことができます

            var h = 0;
            $('.box').each(function() 
            { 
                h = Math.max(h, $(this).height()); 
            }).height(h);

一意の高さ（.boxの最大高さ）をすべての.boxクラスに割り当てます

于 2012-09-05T09:59:04.667 に答える
0

これは、jquery masonry プラグインを使用して実行できます。このリンクがお役に立てば幸いですhttp://masonry.desandro.com/

すでにプラグインを使用している場合は、ブロック間に隙間を空けて自由に移動できるようにしてください。

于 2012-09-05T09:57:18.773 に答える