Cho*_*ett 4 html css html-table background-color
我正在尝试创建一个双色背景的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>
<head>
<style type='text/css'>
td {
padding: 0;
margin: 0;
text-align: center;
}
.container {
position: relative;
}
.bg {
position: absolute;
top: 0;
bottom: 0;
width: 50%;
}
.content {
position: relative;
z-index: 1;
}
.yellow {
left: 0;
background-color: yellow;
}
.green {
right: 0;
background-color: green;
}
</style>
</head>
<body style="width: 100%">
<table style="width: 25%">
<tr style="padding: 0; margin: 0">
<td>
<div class="container">
<div class="content">Hello</div>
<div class="bg yellow"></div>
<div class="bg green"></div>
</div>
</td>
</tr>
</table>
</body>
</html>