Question

我有一个HTML表格，其单元格包含div个display:inline-block，其中包含不同大小的文字。

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

How it looks in Firefox

这可能吗？像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 here上。

Answer 1

快速而肮脏的修复：

CSS

div {
    line-height:60px;
    height:60px;
    vertical-align:middle;
}

演示：http://jsfiddle.net/2YbBg/

Answer 2

不完美，但我能得到的最接近：

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

Answer 3

我读过一次，td没有报告它的高度。因此，任何height: 100%或height:auto等都无效。

所以我的解决方案就在这里：http://jsfiddle.net/UGTYP/

用javascript将“粉红色”文字的高度改为“黄色”div的高度。

使<div>的背景颜色填充封闭的</div>

3 个答案: