将背景颜色设为< div>填充封闭的< td> [英] Make the background-color of a <div> fill the enclosing <td>
问题描述
我有一个HTML表格，其中的单元格包含 div s与 display：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 {height：100％} 似乎受到不同字体大小的限制。
Is this possible? Obvious solutions like div { height:100% } seem to be scuppered by the varying font sizes.
到目前为止的代码：
<!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 此处。
It's also on jsfiddle here.
推荐答案
快速和脏的修复：
CSS
div {
line-height:60px;
height:60px;
vertical-align:middle;
}
演示： http://jsfiddle.net/2YbBg/
这篇关于将背景颜色设为< div>填充封闭的< td>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
