div アライメント シナリオを達成しようとしています。私はcssに比較的慣れていませんが、最近かなり掘り下げていて、要素を整列させることは、控えめに言っても腹立たしいことがあります。
ページを満たす div コンテナがあります。このコンテナー内には、固定幅/高さの div のコレクション (多数) があります。基本的には画像ギャラリーですが、画像は div の背景画像であるため、必要に応じて他のコンテンツを重ねることができます。div はインライン ブロックであるため、div が左の使用可能なスペースに収まらなくなるまで、親コンテナーを左から右に入力します。その後、次の「行」に進みます。問題は、これにより、各行の最後に空のスペースのチャンクが生じる (または生じる可能性がある) ことです。
各行の div を等間隔にしたいのですが、各行の div の数を固定するべきではありません。行の div の数をさまざまな画面解像度 (または画面のサイズ変更) に適応させたいのですが、等間隔のままにしておきます。最後の行も問題になる可能性があります.divがそれを埋めない場合は、行を埋めるために引き伸ばすのではなく、それぞれを上の行と垂直に揃えたいからです。
これが現在どのように見えるかの例です。避けたい1列目の最後にギャップが見えます。
jQuery と jQuery UI の最新バージョンを使用できます。価値のあることですが、IE <9は私にとっては問題ではありません。
水平方向に流動的に配置された div は十分に一般的な問題であることは知っていますが、私が見つけたチュートリアルやヒントでは、行に配置する必要がある div の数と、div が新しい行に分割されないことを知る必要があります。
どんな助けでも大歓迎です。