0

私はそのような画像のいくつかの行を持っています

<div class="row">
  <img src="image.jpg" alt="">
  <img src="image.jpg" alt="">
  <img src="image.jpg" alt="">
  <img src="image.jpg" alt="">
  <img src="image.jpg" alt="">
</div>

各画像の幅は異なり、各行の画像の数も異なります (4 ～ 6)。行に画像を均等に配置したいのですが、行の幅は960pxに固定されています。

これを行うには、各行の合計空きスペースを計算し、それを余白のために画像間で分割します。各行。

4

2 に答える 2

0

CSS のみを使用して何か良いものを実現したい場合 (ここではロジックが必要なので理想的ではありません)、人工的に画像の幅を同じサイズに変更し (推奨されません)、適切なマージンを追加するだけです。それぞれの幅を知ることは明らかに重要です。

CSS:

.row img { 
display: inline; 
width: 100px; 
height: auto; 
margin: 0 20px 20px 0; 
padding: 0; 
}

お役に立てれば？画像の多様でコンパクトなレイアウトが本当に必要な場合は、Masonary プラグインで jQuery を使用してみてください。

http://masonry.desandro.com/

とても使いやすいので、このような美しいプラグインを活用しないのは事実上犯罪です!

于 2012-10-11T09:34:59.207 に答える
-1

Doesn't seem this is doable with just css given that I dont want to calculate the margins for each row manually, so I just done it with jQuery

于 2012-10-11T15:31:09.353 に答える