異なる高さのdivsは2つの列に浮動小数点があります

私は2つの列を持ち、見た目の異なる高さのdivを積み重ねたいと思います。異なる高さのdivsは2つの列に浮動小数点があります

divは動的に作成されます。

私はそれらを50％の幅で浮動させるとすぐに、div＃4が着信するdivよりも5倍高いという状況になります。次に、次のdivは前のdivの下に一番上に揃えられます。私はこのような完全に一致するコンテナに子divを合わせて必要

：

<style> 
    .box {background:#20abff; color:#fff; width:50%; margin: 5px;} 
    .left {float:left;} 
    .right {float:right;} 
    .container {width:205px;} 
</style> 
    <body> 
     <div class="container"> 
      <div class="box left" style="height:60px;">1</div> 
      <div class="box left" style="height:80px;">2</div> 
      <div class="box left" style="height:30px;">3</div> 
      <div class="box left" style="height:70px;">4</div> 
      <div class="box left" style="height:60px;">5</div> 
      <div class="box left" style="height:20px;">6</div> 
      <div class="box left" style="height:40px;">7</div> 
      <div class="box left" style="height:90px;">8</div> 
      <div class="box left" style="height:30px;">9</div> 
     </div> 
    </body>

をし、それがこの

のようになります。ここでは

----- ------- 
    1  2 
----- 
    3 ------- 
----- 4 
    5 
----- 
    6 
----- 
    7 ------- 
----- 8 
    9 

----- 
10 ------- 
     11 
     ------- 
     ------- 
-----

は、私がやっていることのコードスニペットれます

http://dl.dropbox.com/u/142343/divstack.html

謝辞ヘルプ

出典

2012-07-10 dzona

現在のHTMLとCSSを投稿できますか？ – Erica

[何を試しましたか？]（http://mattgemmell.com/2008/12/08/what-have-you-tried/） – avall

あなたは何をしようとしているのか分かりますが、何が問題なのですか？ – Oofpez

JavaScriptでこれを行う必要があります。 jQueryを使用している場合は、Masonryという優れたプラグインがあります。 non jQuery versionもあります。

README on GitHubを引用すると：

石積みダイナミックグリッドレイアウトスクリプトです。それは、CSSフロートの裏側と考えることができます。フローティングは要素を水平方向に配置し、次にを垂直方向に配置するのに対し、要素を垂直方向に配置し、各要素をグリッドの次の開いた場所に配置します。その結果、さまざまな高さの要素の間の垂直方向の隙間がと最小限になります。

single column layoutはおそらくあなたが探しているものです。

あなたがほこりで古いブラウザを離れる気にしない場合は、CSS3 column propertiesがあります。 here, on Quirksmodeの例があり、MDNのドキュメントがあります。

出典

2012-07-10 13:51:05 Bojangles

+1このレイアウトのためには、Masonryプラグインが必要です。 –

しかし、石工はIEで動作しません...任意の解決 –

@ラマあなたはIEで試してみましたか？ [デモサイト]（http://masonry.desandro.com/）はIE10,8,7で完璧に動作します。 – Bojangles

2 divをコンテナとして使用し、両方の列をこのコンテナdivに配置してください。このdiv floatを左右に置くと....動作する可能性があります。グリッドレイアウトも機能します。

出典

2012-07-10 15:04:44

異なる高さのdivsは2つの列に浮動小数点があります

答えて

関連する問題