我正在尝试创建一个具有双色调背景的 HTML 表格单元格；所以我在背景上有正常的文字，左边是黄色，右边是绿色。
目前我得到的最接近的如下。背景是正确的对半，但内容文本在其下方移位。
<html>
<head>
<style type='text/css'>
td.green
{
background-color: green;
padding: 0px;
margin: 0px;
height:100%;
text-align:center
}
div.yellow
{
position:relative;
width: 50%;
height: 100%;
background-color:yellow
}
</style>
</head>
<body style="width: 100%">
<table style="width: 25%">
<tr style="padding: 0px; margin: 0px">
<td class="green">
<div class="yellow"></div>
<div class="content">Hello</div>
</td>
</tr>
</table>
</body>
</html>
我该如何解决这个问题？
最佳答案
必须在黄色DIV中嵌套内容DIV:
<div class="yellow"><div class="content">Hello</div></div>
[编辑] 这有一个缺陷:内部 DIV 将被限制在黄色 DIV 中(即它只会使用页面宽度的 50%)。
所以我们需要另一个 div，绝对定位和一个 z-index:
<html>
<head>
<style type='text/css'>
td.green
{
background-color: green;
padding: 0px;
margin: 0px;
height:100%;
text-align:center
}
div.yellow
{
position:absolute; left:0px; top:0px;
width: 50%;
height: 100%;
background-color:yellow
}
div.container { position:relative; height: 100%; }
div.content { position:relative; z-index:1; }
</style>
</head>
<body style="width: 100%">
<table style="width: 25%; height: 150px;">
<tr style="padding: 0px; margin: 0px">
<td class="green">
<div class="container">
<div class="content">Hello</div>
<div class="yellow"></div>
</div>
</td>
</tr>
</table>
</body>
</html>
适用于 FF 3.6。
关于html - 如何创建具有双色背景的表格单元格？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2446168/