0

背景：我正在使用一个照片购物车，它会自动从 php 生成一个基于表格的画廊，从而限制了我太多的灵活性。我也是新手。

问题：画廊展示了高度适应内容的表格单元格。当我有一整行水平缩略图时，表格单元格又短又宽，而当一行包含垂直缩略图时，单元格要高得多。我希望单元格都是方形的，缩略图就在中间。

我可以访问样式表中的输入 CSS，以及一小部分 HTML 输入，但此 HTML 插入到单个缩略图表单元格中；我无权编辑主表 HTML。我发现了许多使用 firebug 的组件的类和 ID 名称。

我尝试过的：我尝试插入固定大小的 DIV，但表格仍然会占用任何未被实际图像占用的垂直空间。我尝试将 180px x 180px 的透明 PNG 文件插入到 div 中（用于强制正确大小的单元格），然后将缩略图（150px x 150px）放入另一个 div 并弄乱 z-indexing，相对/absolute 定位等，但我从来没有让两个 div 堆叠在一起。绝对定位始终将所有 50 个缩略图对齐到页面的左上角，而不是表格单元格。现在，缩略图 div 总是出现在 PNG div 的正下方，导致表格单元格太高。

我被困住了，因为我已经尝试了我的技能范围内的所有内容并且用尽了我的谷歌搜索。我认为我需要一种方法来强制表格单元格保持一定的高度，或者找到一种方法使缩略图图像覆盖在 PNG 之上。

这是我当前的代码，将 180x180 PNG（强制表格调整为正确尺寸）放在一个 div 中，将缩略图放在第一个 div 下方的第二个 div 中。请原谅我的马虎，因为我绝不是专业人士，只是一个修补匠！

插入单个表格单元格的 HTML

<div id="thumb_frame"><img src="/180x180.png"</div>
<div id="thumb_image">[THUMBNAIL]</div>

我可以访问这些额外的类和 ID：

<table class="thumbnails_table">
<td class="thumbnails_cells">
4

2 回答 2

1

我认为您可以使用纯 CSS 来做到这一点，而无需在 TD 中添加 HTML（当然，除了图像标签）：

td.thumbnails_cells {
    width: 180px;
    height: 180px;
    text-align: center;
}

这就是我所需要的，因为我的测试图像已经垂直居中（我认为是因为它位于 TD 内 - 默认 CSS 等等）。

希望这可以帮助！

于 2011-02-02T00:44:22.440 回答
0

好的，我明白了……很简单，但是，当你以前从未做过的时候……

基于另一个线程中的好建议：

<div style="height:180px; width:180px>
<table cellspacing=0>
<tr>
<td style=height:180px; padding:0; vertical-alignment:middle">
[THUMBNAIL]
</td></tr></table>
</div>
于 2011-02-02T00:49:48.773 回答