html – 如何获得一个div垂直填充表格单元格?

html – 如何获得一个div垂直填充表格单元格?,第1张

概述作为 this question在表单元格中的绝对定位的后续行动,我试图在Firefox中获得一些工作.再次,我在那里约95%,只有一点点让我无法宣布胜利.使用以下示例标记: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" 作为 this question在表单元格中的绝对定位的后续行动,我试图在firefox中获得一些工作.再次,我在那里约95%,只有一点点让我无法宣布胜利.使用以下示例标记:
<!DOCTYPE HTML PUBliC "-//W3C//DTD xhtml 1.0 Strict//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><HTML xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">    <head>        <Title>Test</Title>        <style type="text/CSS">        table { wIDth:500px; border-collapse:collapse}        th,td { border:1px solID black; vertical-align: top; }        th { wIDth:100px; }        td { background:#ccc; }        .wrap { position:relative; height:100%; padding-bottom:1em; background:#aaa; }        .manage { text-align:right; position:absolute; bottom:0; right:0; }        p{ margin: 0 0 5px 0; }        </style>    </head>    <body >    <table>        <tr>                <th>Mauris tortor nulla,sagittis ut,faucibus eu,imperdIEt ut,libero.</th>                <td><div ><p>Cras diam.</p><div >Edit | Delete</div></div></td>        </tr>        <tr>                <th>Cras diam.</th>                <td><div ><p>Cras diam.</p><div >Edit | Delete</div></div></td>        </tr>        <tr>                <th>Cras diam.</th>                <td><div ><p>Mauris tortor nulla,libero. Sed elementum. Praesent porta,tellus ut dictum ullamcorper,est ante condimentum metus,non molestIE lorem turpis in sAPIen. Aenean ID enim. Nullam placerat blandit ante. Aenean ac ligula.</p><div >Edit | Delete</div></div></td>        </tr>    </table>    </body></HTML>

如何获得包装div,以便始终填充单元格,以便管理区域位于单元格的底部?是的,我放在桌子上的数据(在我看来)的表格,所以我想在这里使用一个表.作为最后的手段,我可​​能会转到一个丑陋的嵌套div解决方案,但是由于表在语义上是正确的,我想使用一个如果可能的话.请注意,背景颜色只是显示元素的相对大小 – 我不关心我的布局的背景.还要注意,我希望单元格有一个灵活的高度,所以它们只能扩展到适合自己的内容.

解决方法 你可以把(固定的)高度放在桌面上因此,
<style type="text/CSS">table { wIDth:500px; border-collapse:collapse}th,td { height:200px; border:1px solID black; vertical-align: top; }th { wIDth:100px; }td { background:#ccc; }.wrap { position:relative; height:200px; padding-bottom:1em; background:#aaa; }.manage { text-align:right; position:absolute; bottom:0; right:0; }p{ margin: 0 0 5px 0; }</style>
总结

以上是内存溢出为你收集整理的html – 如何获得一个div垂直填充表格单元格?全部内容,希望文章能够帮你解决html – 如何获得一个div垂直填充表格单元格?所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1131386.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-30
下一篇 2022-05-30

发表评论

登录后才能评论

评论列表(0条)

保存