cell

cell

关注
发信
Mac OS X Lion中的PHP.ini在哪里?
硒铬Firefox WebDriver:在Python中设置HTTPS代理
显示基于先前选择下拉菜单的隐藏选择选项
串联查询
如何使用MongoRegex(MongoDB C#驱动程序)
如何显示我的MySQLi查询错误?
Jsoup-获取仅具有指定属性及其值的HTML标记
接口和抽象类中的 Xml 属性
JPA映射关系实体parentID
从我的 Ruby 应用程序构建 Windows 可执行文件?
如何禁用“扫描外部更改"在netbeans中?
Android和桌面应用程序
如何在SQLite中提交更改？
添加滑动手势以显示详细视图中的下一个项目
如何实时计算音频幅度(Android)

将div放入td单元格的css布局问题

扫码查看
本文介绍了将div放入td单元格的css布局问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在重新布置一个旧的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%>:&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;">
                                        Size:&nbsp;
                                    </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布局问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
08-19 09:47




查看更多

Powered by LMLPHP ©2025 cell 0.053529