0

以下 html 和 css 格式排列我的图像，以便通过浮动每行有九个。然而，每一行的末尾都有一个很大的间隙（但可能不足以容纳另一个图像，因此新行开始）：

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;
  }

我的第一个问题是我如何“移动”每一行的第一张图像，以便画廊在屏幕上是对称的。我的第二个问题涉及如何确保这种形式（9x4）在每个浏览器（每个屏幕宽度）中都是相同的？

目前我一直在使用一个固定的容器（以像素为单位）来填充我自己的屏幕。提前谢谢了。

4

3 回答 3

1

而不是使用float: left，display: inline-block在容器 div 上使用。这使您可以将图像居中：

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

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

于 2012-12-24T15:23:47.783 回答
0

将所有 div 放在一个父 div 中（或每行 4 个父 div，最重要的是一个）。对于内部 div，将位置指定为绝对位置，以便它们相对于父容器。

于 2012-12-24T15:25:35.630 回答
0

您可以在外部容器中使用 padding-left 将第一个图像向右移动一点。

您必须以百分比指定所有尺寸，以便屏幕以不同的分辨率正确缩放。

最好的方法是为每个元素（div、img 等）提供不同颜色的边框，并查看这些边框如何相互对齐。

于 2012-12-24T15:27:45.960 回答