将div放入td单元格的css布局问题 [英] css layout problem putting divs inside td cell
问题描述
我正在重新布置一个旧的ASP页面，以便用一些新的要求对其进行更新。我试图把一些div标签放在一个td单元格中，因为td单元格内的一个表格不会达到我以前的样子。所以，基本上我有一个div应该对齐左上角，另一个div也应该对齐顶部填充空间的其余部分，一个div下面有一行文本，一个div下面包含图像应该水平和垂直居中，最后一个div低于该图像应低于图像并对齐到单元格的底部。我已经（见下面的代码）把它放在IE中，但它看起来像铬和Firefox中的垃圾，我在哪里出错？
< td style =position：relative;>
< div style =position：absolute; width：10％; top：0; left：0; z-index：1; font-family：Verdana; font-size：small; color：＃22476C; >
<％=（sCount + 1）+（（pg-1）* PageSize）％> ;.）
< / div>
< div style =position：absolute; width：100％; top：0; left：0％; z-index：2; text-align：center;>
<％= rs（发布）％>
< / a>
< / div>
< div style =margin-top：20px; text-align：center; font-family：Verdana; font-size：x-small; color：＃22476C;>
<％= pubRunDate％>
< / div>
< div style =text-align：center; vertical-align：middle; display：block; padding-bottom：120px;>
< img src =<％= LastThumb％> style =border：solid 1px black; alt =/>
< / div>
< div style =position：absolute; left：0; bottom：0; >
< tr>
< td style =width：32％; text-align：center;>
<％=替换（rs（Section），0，）& Fix（rs（Page））& RS（ 后缀）％>
< / td>
< td style =width：68％; text-align：right; padding-right：10px;>
<％= InvoiceString& & SaveString％GT;
< / td>
< / tr>
< tr>
< td style =text-align：right;>
<％= w_Agency％>：& nbsp;
< / td>
< td>
<％= rs（AgencyName）％>
< / td>
< / tr>
< tr>
<％= RightCellA％>
< / tr>
< tr>
< td style =text-align：right;>
<％= w_Advertiser％>：& nbsp;
< / td>
< td>
<％= rs（AdvertiserName）％>
< / td>
< / tr>
< tr>
<％= RightCellB％>
< / tr>
< tr>
< td style =text-align：right;>
<％= w_Description％>：& nbsp;
< / td>
< td>
<％= Left（rs（Keyword），23）％>
< / td>
< / tr>
< tr>
< td style =text-align：right; padding-bottom：7px;>
尺寸：& nbsp;
< / td>
<％= RightCellC％>
< / tr>
< / table>
< / div>
< / td>
我的假设 - 没有页面的实例 - 你的填充和宽度％在Mozilla中的计算方式是不同的，另外，有时候Mozilla需要'display：inline-block'来显示DIV和A标签，就像IE一样。
我强烈建议研究这两种浏览器解释CSS的差异，尤其是它们的填充/边距计算。
最后一点 - 您正在嵌入表格中的表格不符合W3C规范。
I am re-laying out an old asp page in order to update it with some new requirements. I am trying to put some div tags inside a td cell because a table within the td cell would not achieve what I was after. So, basically I have a div which should align to the top left, another div which should also align to the top filling the rest of the space, a div below that with a line of text, a div below that containing an image which should be centered horizontally and vertically, and a final div below that which should go below the image and align to the bottom of the cell. I have (see the code below) laid it out so that it works in IE, but it looks like crap in chrome and firefox, where am I going wrong?
<td style="position:relative;">
<div style="position:absolute; width:10%; top:0; left:0;z-index:1;font-family:Verdana;font-size:small;color:#22476C;">
<%=(sCount+1) + ((pg-1)* PageSize)%>.)
</div>
<div style="position:absolute; width:100%; top:0; left:0%;z-index:2; text-align:center;">
<a style="font-family:Verdana;font-size:small;font-weight:bold;color:#22476C;" href="results.asp?pubid=<%=PubID & "&date=" & Server.URLEncode(w_RunDate) & "&ttype=" & tType%>" target="_top">
<%=rs("Publication")%>
</a>
</div>
<div style="margin-top:20px;text-align:center;font-family:Verdana;font-size:x-small;color:#22476C;">
<%=pubRunDate%>
</div>
<div style="text-align:center; vertical-align:middle;display:block;padding-bottom:120px;">
<img src="<%=LastThumb%>" style="border:solid 1px black;" alt="" />
</div>
<div style="position:absolute; left:0; bottom:0;" >
<table border="1" cellpadding="0" cellspacing="0" class="verdanaSmall" style="width:100%;background-color:#D3DAE1; vertical-align:bottom;">
<tr>
<td style="width:32%;text-align:center;">
<%=Replace(rs("Section"),"0","") & Fix(rs("Page")) & rs("Suffix")%>
</td>
<td style="width:68%;text-align:right; padding-right:10px;">
<%=InvoiceString & " " & SaveString%>
</td>
</tr>
<tr>
<td style="text-align:right;">
<%=w_Agency%>:
</td>
<td>
<%=rs("AgencyName")%>
</td>
</tr>
<tr>
<%=RightCellA%>
</tr>
<tr>
<td style="text-align:right;">
<%=w_Advertiser%>:
</td>
<td>
<%=rs("AdvertiserName")%>
</td>
</tr>
<tr>
<%=RightCellB%>
</tr>
<tr>
<td style="text-align:right;">
<%=w_Description%>:
</td>
<td>
<%=Left(rs("Keyword"), 23)%>
</td>
</tr>
<tr>
<td style="text-align:right; padding-bottom:7px;">
Size:
</td>
<%=RightCellC%>
</tr>
</table>
</div>
</td>
My assumption - without having a live example of the page - is that your padding and width % are calculating differently in Mozilla, additionally, sometimes Mozilla requires 'display: inline-block' in order to display DIV and A tags the same way the IE does.
I would highly recommend researching the differences in the way these two browsers interpret CSS in particular their padding / margin calculations.
Last note - you are embedding a table within a table which will not meet W3C specifications.
这篇关于将div放入td单元格的css布局问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
