1

それぞれ3つの画像の行があるdivがあります。画像はすべて同じサイズです。私は小さな完全に透明な透明な画像を使用していましたが、画像間にスペースを形成するために高さと幅を明示的に指定しました。例は次のようになります。

 div begin
 space image width=15, height=1 actual image (no explicit dimensions)
 space image width=10, height=1 actual image (no explicit dimensions)
 space image width=10, height=1 actual image (no explicit dimensions)

 space image width=900, height=20 (this is to separate rows, which should be 900 wide, space + 3 x image)

 space image width=15, height=1 actual image (no explicit dimensions)
 space image width=10, height=1 actual image (no explicit dimensions)
 space image width=10, height=1 actual image (no explicit dimensions)
 div end

これらの行は、コードによって生成される場合と生成されない場合があり、hrefs が存在する場合もあります。画像/またはアンカー要素にマージン/パディングを使用してスペースを作成できる可能性があることに気付きました。ただし、これには各画像にクラスを設定する必要があります。これは良い方法とは思えません。いくつかの理由により、スペースはアンカータグ内にあり、リンク可能になります。私は div を使用し、それらに対して特定のクラスを使用することに反対しません。私はこれを試しましたが、期待どおりに動作しないようです。改行を作成するため、画像が列に表示され、実際のスペースを占有していないように見えます.

4

3 に答える 3

2 
  How about 2 divs, one for each row. Then set the margins on those.

  <div class="row"> Your images or anchor tags</div>
  <div class="row"> Your images or anchor tags</div>

それで

 .row{
      margin-top:10px;

  }

または、画像の行間に必要なだけのスペース。

画面上で画像をより適切に配置するために、画像に div を使用できます。特に、アンカー タグにマージンを追加したくない場合。

 div.img{
     display:inline;
 }

 .firstcol{
     margin-left:15px;
 }

 .col{
     margin-left:10px;
 }

と

 <div class="img firstcol">The first image of teh row</div>
 <div class="img col">The second image of teh row</div>

等

于 2012-12-15T10:48:36.987 に答える
1

スペーサー画像の使用はかなり扱いにくく、ほとんど必要ありません。最も簡単な方法は、すべての画像をa要素内にラップ<a><img ...></a>し、リンクを意図していないものだけを使用することです。次にa、余白をクリック可能にせずに、要素に余白を設定できます。

また、HTML コードの分割部分を作成せずに、画像ギャラリーを 3 つの画像の行にフォーマットすることもできます。例：

.gallery img { border: 0; margin-bottom: 20px;  }
.gallery a:nth-child(3n+1) { margin-left: 15px; }
.gallery a:nth-child(3n+2) { margin-left: 10px; margin-right: 10px; }
.gallery a:nth-child(3n+3):after { content: "\A"; white-space: pre; }

これにより、HTML で列への分割をハードコーディングすることなく、効果的にレイアウトが表のようになります。最後のルールは、3 番目の要素ごとに改行を発生させる少しトリッキーな (しかし有効な) 方法です。

jsfiddle

PS これにより、画像の最後の行の下にも 20px の余白が作成されます。これが問題になる場合は、 を設定して無効にすることができます.gallery { margin-bottom: -20px }。

于 2012-12-15T12:09:25.897 に答える
0

これは私が仕事をするようになったものです:

.row {
  margin-left:20px;
}
.space {
  margin-left:12px;
  display: inline;
}
.row-space {
  margin-bottom:20px;
}

div class=row
  a href=x img
  div class=space /div
  a href=x img
  div class=space /div
/div

div class=row-space /div

改行を避けるために、display-inline が必要でした。過去に float: left を読んで使用しましたが、これには他の副作用があり、この目的には適していません。

于 2012-12-15T11:43:08.897 に答える