做一个＆LT的背景色; DIV＆GT;填补了封闭＆LT; TD＆GT; [英] Make the background-color of a <div> fill the enclosing <td>
问题描述
我有一个HTML表，其细胞中含有 DIV s的显示：inline-block的，含有不同的文本大小。
I have an HTML table whose cells contain divs with display:inline-block, containing text of varying sizes.
我需要的文字对齐的基准，而我需要的 DIV 调整背景颜色来填充单元格的高度。对于大字体，背景色的确实的填充单元格，但它不是为较小的字体：
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:
这可能吗？明显的解决方案，如 DIV {高度：100％} 似乎是由不同的字体大小来scuppered
Is this possible? Obvious solutions like div { height:100% } seem to be scuppered by the varying font sizes.
这里的code到目前为止：
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>
这也是对的jsfiddle 这里。
推荐答案
快速和肮脏的修复：
CSS
div {
line-height:60px;
height:60px;
vertical-align:middle;
}
演示： http://jsfiddle.net/2YbBg/
这篇关于做一个＆LT的背景色; DIV＆GT;填补了封闭＆LT; TD＆GT;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
