8

サムネイルのページを表示したい。サムネイルは、ユーザーがアップロードしたアートワークの画像です。各画像の幅は制限されていますが、高さは制限されていません。これは、トリミングなしで画像全体を表示するためです。

画像同士を隙間なく突き合わせてほしいです。列の数は固定されていません。ページを拡大またはサイズ変更すると、画像は正しい列数に流れるはずです。

float:left

私が欲しいものはほとんどです。ページに背の高い画像がある場合を除いて、このギャップのある外観になります。

ここに画像の説明を入力

ギャップをなくすにはどうすればよいですか?

4

2 に答える 2

9

CSS がどれほど優雅に必要なのかはわかりませんが、それでも良いオプションです。masonry.js を使用してそれを支援できます。

http://css-tricks.com/seamless-responsive-photo-grid/

于 2012-02-25T13:20:48.203 に答える
6

css のみでこれを行いたい場合は、すべての列に div を作成し、それらの列をフロートする必要があります (ただし、画像の順序が乱れます)。

または、このような jquery プラグインを使用することもできます。

于 2011-06-30T21:18:06.287 に答える