html – 填充封闭的背景颜色

html – 填充封闭的背景颜色,第1张

概述我有一个 HTML表格,其单元格包含带显示的div:inline-block,包含不同大小的文本. 我需要文本在基线上对齐,我需要div的背景颜色填充单元格的高度.对于最大的字体,背景颜色确实填充单元格,但它不适用于较小的字体: 这可能吗?像div {height:100%}这样明显的解决方案似乎被不同的字体大小所打破. 这是迄今为止的代码: <!DOCTYPE html><html lang 我有一个 HTML表格,其单元格包含带显示的div:inline-block,包含不同大小的文本.

我需要文本在基线上对齐,我需要div的背景颜色来填充单元格的高度.对于最大的字体,背景颜色确实填充单元格,但它不适用于较小的字体:

这可能吗?像div {height:100%}这样明显的解决方案似乎被不同的字体大小所打破.

这是迄今为止的代码:

<!DOCTYPE HTML><HTML lang="en"><head>  <Meta charset="utf-8">  <style type="text/CSS">    table td {        vertical-align: baseline;        padding: 0;    }    td div {        display: inline-block;    }  </style></head><body>    <table>        <tr>            <td >                <div >Pink</div>                <div >Green</div>            </td>            <td >                <div style='Font-size: 40pt; background-color:yellow;'>                    Big yellow text                </div>            </td>            </tr>  </table></body></HTML>

它也在Jsfiddle here上.

解决方法 不完美,但我能得到的最接近:

http://jsfiddle.net/gfPkV/14/

总结

以上是内存溢出为你收集整理的html – 填充封闭的背景颜色全部内容,希望文章能够帮你解决html – 填充封闭的背景颜色所遇到的程序开发问题。

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

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

原文地址: https://outofmemory.cn/web/1136087.html

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

发表评论

登录后才能评论

评论列表(0条)

保存