2012-04-30 2 views
0

私はfloat:leftと似たようなことをしようとしています。 float:leftの場合、このスタイルプロパティで複数のdivを設定すると、ウィンドウの幅に応じて配置されます。ウィンドウが狭すぎると1つの列になり、大きなウィンドウがあると複数の列に展開されます。浮動小数点型を複製する方法:代わりにウィンドウの高さの左のタイプの効果?

私は同様のことをしたいと思っていますが、縦型フロートのように動作させたいと思います。したがって、5つのアイテムがあり、ブラウザのウィンドウの高さが1つの列に4つしか含まれない場合、余分なdivは2番目の列に位置する必要があります。簡単に言えば、divのリストが長い場合は、ウィンドウの高さに応じて列に表示する必要があります。

divやcss、jquery uiでこれを行う方法はありますか?

+0

は見てみましょうをhttp://masonry.desandro.com – Nadh

+0

これをサポートしようとしているブラウザ(どのように下位互換性がありますか?) – ScottS

+0

@ScottS、IE8、Firefox、Chromeが優先されます。しかし、IEがあまりにも多くのことを聞いていれば、簡単な解決策を提供する可能性のあるライブラリは大丈夫でしょう。 – ttback

答えて

1

これはCSSだけでは不可能です。あなたの最善の策は、石工のようなものです:

http://masonry.desandro.com/

(またはおしゃれなフィルタリングのためと石工によって供給される同位体、詰め込む:http://isotope.metafizzy.co/

希望に役立ちます:)

+0

私はこれらのクールな図書館に私を紹介するためのアップヴォートを提供します。しかし、彼らはパッキング/ギャップ充填能力を持つフロートのより巧妙なバージョンであるようです。したがって、例ではdivをページ上に水平に配置していますが、浮動小数点のフリップサイドであることを示しているので、私はそれを打ち明けます。うまくいけばうまくいきます。 – ttback

+0

あなたはメディアクエリーとCSS3フレックスボックスを調べることもできますが、これは非常に実験的で、現時点ではWebkitでしか動作しません。とにかくいくつかの情報を含むブログ投稿があります:http://blog.isotoma.com/2010/08/css3-flexbox/ – will

関連する問題