次の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)がすべてのブラウザー(すべての画面幅)で同じであることを確認する方法に関するものですか?
現在、私は自分の画面を埋めるために固定コンテナ(ピクセル単位)を使用しています。よろしくお願いします。