最近、あるオンラインストアでフローティングブロックを販売する問題に遭遇しました。 一番下の行は、商品がブロックで表示されることです。 計画どおり、水平ブロックの数は画面の解像度によって異なります。 ブロックの高さが固定されていないため、フロートバカを使用することはできませんでした。
少しグーグルで、何も見つかりませんでした。 しかし、彼はYandexとLebedevのスタジオの店で同じようなものを見たことを思い出しました。
実際、私はあなたがあなた自身が示されたソースで見つけることができるものをレビューのためにここに投稿しています。 私がしたことはすべて、不必要なコードを取り除くことでした。 前に同様の投稿を見つけた場合、時間を節約できます。
これらの方法には、それぞれ長所と短所があります。 見てみましょう：
Yandexと
ソース からの例+ブロックの高さ制限なし
+すべての空のスペースを埋めます
-かなり大きなjavascriptを使用します
-使用済みテーブル
Lebedevのスタジオと
ソース からの例 （左のコメントをありがとう）
+ JavaScriptなし
+テーブルなし
-新しいブロックに十分ではない場合、空のスペースを埋めません
-厳密なブロックの高さ制限
他の興味深い例を知っているなら、書いてください。 コレクションを補充します。