个人中心
gpt4 book ai didi

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

转载 作者：太空宇宙 更新时间：2023-11-04 14:45:23 24 4
gpt4 key购买 nike

我使用的是 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;
}

最佳答案

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

<table cellpadding="4px">

如果你想通过 CSS 控制它，请查看 Set cellpadding and cellspacing in CSS? 上的置顶回复

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

编辑

为什么是 630 像素？

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

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

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

如果您不想花时间进行复杂的计算，可以讨论更优雅的行中 float 元素解决方案，例如，此处 Best Practice for CSS Clear or Overflow

关于html - 3x3 照片翻转单元格间距问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17910681/

24 4 0
文章推荐： c++ - 如何在类中创建和使用指向未知数量结构数组的指针？
文章推荐： java - 无法从 Runtime.exec() 获取输出
文章推荐： java - :commandButton not invoked when nested into own component extending UIData
文章推荐： java - java 中的 xmlSchema apache
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com