Question

我正在使用带有翻转的3x3网格照片。第二行的3个图像是现场页面的href。我希望在索引上以1024x600的中心格式对所有列和行进行4px填充（我没有对新图像调整大小，因此图像当前处于200x200，我想先处理样式问题）。这个问题在两个页面上是一致的，第二个是我的照片页面，它有一个lightbox2图库，所以我不得不假设它在CSS中。我相对较新的HTML和故障排除我擦洗论坛，书籍等无济于事。我进入这个希望清理我的编码并使单元格间距正确，但似乎创造了更多的问题而不是。

索引的HTML：

<html>
<head>
<title>McKay Pruitt Home</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
<meta charset="UTF-8">
<script type="text/javascript">
<!---Rollover script here--->
</script>
</head>

<div class=".phototable">
<table width="1020px">
  <tr>
    <th width="1020" class=".bigname" scope="col"><a href="index.html">McKay Pruitt</a></th>
  </tr>
</table>
<table>
  <tr>
    <td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','img/index/sm/McKayPruitt_index-1.jpg',1)"><img src="img/index/lg/McKayPruitt_index-1.jpg" width="200" height="200" id="Image1"></a></td>
<td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','img/index/sm/McKayPruitt_index-2.jpg',1)"><img src="img/index/lg/McKayPruitt_index-2.jpg" width="200" height="200" id="Image2"></a></td>
    <td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','img/index/sm/McKayPruitt_index-3.jpg',1)"><img src="img/index/lg/McKayPruitt_index-3.jpg" width="200" height="200" id="Image3"></a></td>
  </tr>
  <tr>
    <td><a href="photos.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4','','img/index/sm/McKayPruitt_index-4.jpg',1)"><img src="img/index/lg/McKayPruitt_index-4.jpg" width="200" height="200" id="Image4"></a></td>
    <td><a href="multimedia.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','img/index/sm/McKayPruitt_index-5.jpg',1)"><img src="img/index/lg/McKayPruitt_index-5.jpg" width="200" height="200" id="Image5"></a></td>
    <td><a href="contact.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image6','','img/index/sm/McKayPruitt_index-6.jpg',1)"><img src="img/index/lg/McKayPruitt_index-6.jpg" width="200" height="200" id="Image6"></a></td>
  </tr>
  <tr>
    <td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image7','','img/index/sm/McKayPruitt_index-7.jpg',1)"><img src="img/index/lg/McKayPruitt_index-7.jpg" width="200" height="200" id="Image7"></a></td>
    <td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image8','','img/index/sm/McKayPruitt_index-8.jpg',1)"><img src="img/index/lg/McKayPruitt_index-8.jpg" width="200" height="200" id="Image8"></a></td>
    <td><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image9','','img/index/sm/McKayPruitt_index-9.jpg',1)"><img src="img/index/lg/McKayPruitt_index-9.jpg" width="200" height="200" id="Image9"></a></td>
  </tr>
</table>
</div>
</body>

还附带的CSS：

.bigname {
font-family: 'Source Sans Pro', sans-serif;
width: 1000px
font-size: 50px;
font-weight: bold;
}

.phototable {
font-family: 'Source Sans Pro', sans-serif;
display: inline-block;
align: center;
width: 1020;
margin:0 auto;
border: 0;
cellpadding: 0;
cellspacing: 100px;
}

Answer 1

您可以使用cellspacing和cellpadding为表格单元格添加间距，您已在.phototable的css中定义了这些间距。但是，您的.phototable实际上是div元素而不是table。为了向表格单元格添加间距，您应该将cellpadding规则添加到所需的table元素中，如下所示：

<table cellpadding="4px">

如果您想通过CSS控制此问题，请查看Set cellpadding and cellspacing in CSS?

上方的回复

话虽如此，使用表来布局任何不是表格数据的东西都被认为是不好的做法，并且在添加内容时代码会变得越来越混乱。相反，您应该使用css float属性在页面上定位项目。请参阅此处的菜单布局示例http://jsfiddle.net/2PANV/

修改

为什么选择630px？

这不是每行指定三个图像的最可重用方式，是的，但假设您的图像总是具有200px的已知宽度，我相信这是初学者掌握的最简单方法。

如果你想要每行一定数量的图像，你需要一些方法来指定行必须在某个时刻中断并开始一个新行。 float: left标签上的a属性基本上表示只要有空间，它们就会一个接一个地连续出现。因为对于超过三个200px图像，1020px有足够的空间，所以在第三张图像之后该行不会破裂。这就是为什么我将图像包装在一个居中的630px容器中，这样可以确保一行内不超过三个。

通过计算拟合三幅图像所需的水平空间的精确数量，可获得630px。说实话，它应该是3 * 200px + 6 * 4px（其中6 * 4px是每个图像的水平填充），所以630距离确切的中心6px，但我添加它是为了安全（你永远不知道有多么不同浏览器可能会表现出来。）

如果您不想花时间进行hacky计算，则会讨论更优雅的行中浮动元素解决方案，例如Best Practice for CSS Clear or Overflow

3x3照片翻转单元格间距问题

1 个答案: