0

ウィンドウを拡大したときに画像を増やしたいのですが、別の画像用のスペースがある場合は、各行に 1 を加えます…</p>

次のように HTML ページを開くとします。

画像1 画像2 画像3 画像4 画像5 画像6 画像5 画像6
画像
7

ウィンドウを拡大すると、画像が増加し、1 行に 4 つ (またはそれ以上) の画像が表示されます。

画像1 画像2 画像3 画像4 画像5 画像6 画像
7

減少すると、次のような逆のアクションが発生します。

画像1 画像2 画像3 画像4 画像
5画像6
画像
7

このようなもの: http://pixelgrade.com/demos/lens/

助けていただければ幸いです:)

4

2 に答える 2

2

これらのCSSプロパティのいくつかをこの画像に与えることができます

img {
  float:left;
  /*or*/
  display:inline-block;
}

このデモフロートまたは インライン ブロックを確認する

レスポンシブ サイズの場合、メディア クエリを使用できますが、各ブラウザー サイズで表示する画像の数を知る必要があります。1000px から 1200px までは 1 行あたり 3 つの画像、1000px 未満は 2 つの画像のみです。

新しいデモレスポンシブ サイズ

于 2013-10-24T14:06:39.637 に答える