CSSで箱詰め

私はCSSレイアウトで古典的なボックスのパッキング/ナップザックの問題を解決しようとしています。CSSで箱詰め

このような要素間の空白を最小限に抑える方法で多くのボックスを配置したいと思います。ボックスが順次配置されているが、すべてのホワイトスペースを効率的に消費される -

CSS3の列はここで非常にうまく動作します。箱にはせん断があり、複数の列にまたがっています。それはできません。

いくつかのボックスの後に古典的なdiv.clearerを使用しましたが、それは効果がありませんでした。ボックスはまだCSS3の列にまたがっていました。そこ列スパンCSSプロパティがあるが、それはまだブラウザでサポートされていない。（

必要に応じて、私は列を自分で定義し、手で箱を手配しますが、現実的にボックスが非常に頻繁に高さを変えることができる

。

最後の質問：？純粋なCSSを使用してボックス間の空白を最小限に抑える方法で、ボックスを配置する方法はあり

おかげ

ボックスレベルの要素はありますか？ –

うん、彼らはちょうどdivだ。私はdisplay：blockとdisplay：inline-blockを実験しました。 – xconspirisist

現実的には、JavaScriptを使うだけです：http://masonry.desandro.com/ – thirtydot

私はまだそれを自分自身を試していないが、一つの可能な答えは使用する可能性があります！ jQuery Masonry plugin。これはあなたの状態に合っているようです。

純粋なCSSとHTMLでこれを行うことは非常に難しく、おそらくいくつかの望みや要求を取り除かなければならないでしょう...

2012-08-22 15:13:46 Jeroen

または、メーソンリーのレイアウトなどを行うことができるメーソンリーの "big brother"アイソトープを使用します。実装が簡単です。もう1つの選択肢は、テキストとともに使用できるjQuery Tilesギャラリーです。 – Systembolaget

答えて