0

我正在使用带有翻转的 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;
}
4

1 回答 1

1

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

<table cellpadding="4px">

如果你想从 CSS 中控制它，请查看在CSS 中设置 cellpadding 和 cellspacing 的顶部回复？

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

编辑

为什么是 630 像素？

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

如果您希望每行有一定数量的图像，则需要某种方式来指定该行必须在某个点中断并开始新行。标签上的float: left属性a基本上是说，只要有空间，它们就应该一个接一个地连续来。因为 1020px 中有足够的空间容纳超过 3 张 200px 的图像，所以在第三张图像之后行不会中断。这就是为什么我将图像包裹在一个居中的 630px 容器中，这样可以确保一行中不超过三个。

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

如果您不想花时间进行 hacky 计算，将讨论更优雅的行中浮动元素的解决方案，例如，此处CSS Clear 或溢出的最佳实践

于 2013-07-28T17:58:43.990 回答