使的背景颜色为填写封闭的
我有一个 HTML 表格，其单元格包含带有 display:inline-block 的 div，其中包含不同大小的文本。
我需要文本在基线上对齐，并且需要 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 style="background-color:cyan">
<div style="background-color:pink;">Pink</div>
<div style="background-color:green;">Green</div>
</td>
<td style="background-color:cyan">
<div style='font-size: 40pt; background-color:yellow;'>
Big yellow text
</div>
</td>
</tr>
</table>
</body>
</html>
它也在 jsfiddle 这里上。
I have an HTML table whose cells contain divs with display:inline-block, containing text of varying sizes.
I need the text to align on the baseline, and I need the background colors of the divs to fill the height of the cells. For the largest font, the background color does fill the cell, but it doesn't for the smaller fonts:
Is this possible? Obvious solutions like div { height:100% } seem to be scuppered by the varying font sizes.
Here's the code so far:
<!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 style="background-color:cyan">
<div style="background-color:pink;">Pink</div>
<div style="background-color:green;">Green</div>
</td>
<td style="background-color:cyan">
<div style='font-size: 40pt; background-color:yellow;'>
Big yellow text
</div>
</td>
</tr>
</table>
</body>
</html>
It's also on jsfiddle here.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
不完美，但我能得到的最接近的：
http://jsfiddle.net/gfPkV/14/
Not perfect, but the closest I could get:
http://jsfiddle.net/gfPkV/14/
快速而肮脏的修复：
CSS
演示：http://jsfiddle.net/2YbBg/
Quick and dirty fix:
CSS
Demo: http://jsfiddle.net/2YbBg/
我读过一次，
td没有报告它的高度。因此任何height: 100%或height:auto等都不起作用。所以我的解决方案在这里： http://jsfiddle.net/UGTYP/
它改变了“粉红色”文本的高度使用 javascript 到“黄色”div 的高度。
I read once, that
tddoes not report it's height. So anyheight: 100%orheight:auto, etc.. won't work.So my solution is here: http://jsfiddle.net/UGTYP/
It changes height of "pink" text to the height of "yellow" div with javascript.