html - 画面幅に応じて、行ごとの画像数を動的にスケーリングします

Question

さまざまなアプローチを使用してこれを試しましたが、それぞれに何らかの問題があるようです。

比較的多数の画像 (約 50) を行と列にきれいに並べて表示する必要があります。ただし、画面の幅に応じて各行の長さを調整する必要があります。

ここに私が取ったいくつかの試みがあります：

1. 画像を直接<div>. これは機能しますが、行と列に整列しません。
2. bootstrap を使用し、row-fluid各画像を に配置しますspan2が、これにより画像が浮き上がり、望ましくない方法で互いに重なり合うことがあります。
3. テーブルを使用していますが、ラップする必要がある場合、行がぶら下がっていることがよくあります。

ブートストラップでこれを行う慣用的な方法はありますか、それとも単純な HTML/CSS ですか?

Answer 1

あなたのコードを見たいのですが、あなたが私にくれたものに基づいて、画像のdivを作成し、それらすべてのクラスを作成して、divの周りにパディングを残してフロートさせたいと思います。ただし、画面サイズごとに個別のcssを用意し、その多くをパーセンテージに基づいて作成する必要があります。