背景:我使用的照片购物车可以从php自动生成一个基于表格的图库,因此限制了我太多的灵活性。我也是个新手。
问题:图库会根据内容的高度调整表格单元格的高度。当我有一整行水平缩略图时,表格单元格又短又宽,而当一行包含垂直缩略图时,单元格就会高得多。我希望所有的单元格都是正方形的,缩略图正好位于中间。
我可以访问样式表中的输入CSS,以及一小部分HTML输入,但此HTML是插入到单个缩略图表格单元格中的;我没有编辑主表HTML的权限。我发现了许多使用firebug的组件的类名和ID名。
我尝试过的方法:我尝试插入固定大小的DIVs,但表仍然会占用所有未被实际图像占用的垂直空间。我试着把一个透明的PNG文件,180px x 180px插入到一个div中(它的工作原理是强制大小合适的单元格),然后把缩略图图像( 150px X 150px)放到另一个div中,并处理z索引,相对/绝对定位等,但是我从来没有让这两个div堆叠在一起。绝对定位始终将所有50个缩略图与页面的左上角对齐,而不是表单元格。现在,缩略图div总是出现在PNG div的正下方,导致表单元格太高。
我被困住了,因为我已经在我的技能范围内尝试了所有的东西,并耗尽了我的谷歌搜索。我认为我需要的是一种方法,要么强制表格单元格保持一定的高度,要么找到一种方法使缩略图图像覆盖在PNG的顶部。
这是我当前的代码,它将一个180x180PNG(强制表格的尺寸)放在一个div中,并将缩略图放在第二个div中,位于第一个div的下方。请原谅我的草率,因为我根本不是专业人士,只是个打杂的!
插入到单个表单元格中的HTML
<div id="thumb_frame"><img src="/180x180.png"</div>
<div id="thumb_image">[THUMBNAIL]</div>
并且我可以访问这些附加的类和ids:
<table class="thumbnails_table">
<td class="thumbnails_cells">
发布于 2011-02-02 08:44:22
我认为你可以使用纯CSS来实现这一点,而不需要在TDs中添加和HTML (当然除了image标签之外):
td.thumbnails_cells {
width: 180px;
height: 180px;
text-align: center;
}
这就是我所需要的,因为我的测试图像已经垂直居中了(我想是因为它在一个TD默认的CSS和诸如此类的东西中)。
希望这能有所帮助!
发布于 2011-02-02 08:49:49
好吧,我把这个out...so弄得很简单,但是当你从来没有做过的时候……
基于另一个帖子中的好建议:
<div style="height:180px; width:180px>
<table cellspacing=0>
<tr>
<td style=height:180px; padding:0; vertical-alignment:middle">
[THUMBNAIL]
</td></tr></table>
</div>
https://stackoverflow.com/questions/4869420
复制相似问题