0

次のhtmlおよびcss形式は、フローティングを介して各行に9つあるように画像を配置します。ただし、各行の終わりには大きなギャップがあります（ただし、おそらく別の画像を収めるのに十分な大きさではないため、新しい行が開始されます）。

HTML：

<div id = "body">

<div class="img">
  <a href="">
  <img src="" width="110" height="90">
  </a>
  <div class="desc"></div>
</div>

<div class="img">
  <a href="">
  <img src="" width="110" height="90">
  </a>
  <div class="desc"></div>
</div>
</div>

//This is repeated many times so that there are 4 rows of nine images

CSS：

div.img
  {
  margin:2px;
  border: 2px solid #000000;
  height:auto;
  width:auto;
  float:left;
  text-align:center;
  }
div.img img
  {
  display:inline;
  margin:8px;
  }

div.desc
  {
  text-align:center;
  font-weight:normal;
  width:120px;
  margin:5px;
  }

私の最初の質問は、ギャラリーが画面内で対称になるように、各行の最初の画像をどのように「シフト」するかです。私の2番目の質問は、この構成（9x4）がすべてのブラウザー（すべての画面幅）で同じであることを確認する方法に関するものですか？

現在、私は自分の画面を埋めるために固定コンテナ（ピクセル単位）を使用しています。よろしくお願いします。

4

3 に答える 3

1

を使用する代わりに、コンテナdivfloat: leftで使用します。display: inline-blockこれにより、画像を中央に配置できます。

#body {
  text-align: center;            
}
div.img
{
  display: inline-block;
  ....
}

http://jsfiddle.net/xzH7R/1/

于 2012-12-24T15:23:47.783 に答える
0

すべてのdivを1つの親div内に配置します（または各行に4つの親div、さらに1つ）。内部divの場合、親コンテナを基準にして位置を絶対値として指定します。

于 2012-12-24T15:25:35.630 に答える
0

外側のコンテナでpadding-leftを使用して、最初の画像を少し右に移動できます。

画面がさまざまな解像度で適切に拡大縮小されるように、すべてのサイズをパーセンテージで指定する必要があります。

最良の方法は、要素（div、imgなど）ごとに異なる色の境界線を指定し、これらの境界線が互いにどのように整列するかを確認することです。

于 2012-12-24T15:27:45.960 に答える