Question

我目前在计算中有一个绿色和红色的百分比栏，现在我试图将另一种颜色黄色添加到同一个栏中以获得另一个统计数据，我似乎无法在我的css或php中找到它。这是我有绿色/红色组合的当前代码。为了做到这一点，我需要改变什么？感谢

td.graph .all {
    background: green;
    height: 18px;
}

td.graph .right {

    text-align: right;
    float: right;
    background: red;
    height: 18px;
}

echo '</td><td class="graph"><div class="all" style="width:100%"><div class="right" style="width:' . $right . '%"></div>'

我将添加一个新变量，它将保持黄色大小，我试图弄清楚我需要什么来正确。感谢

Answer 1

我会为每种颜色创建一个单独的div。然后向左漂浮。您可以使用css百分比来调整它们的大小。

http://jsfiddle.net/y9UqN/

td { border: 1px solid gray;  height: 50px; width: 300px; }
td.graph .bar {
    height: 18px;
    float: left;
}
.green { background: green; width: 60%; }
.red { background: red; width: 10%; }
.yellow { background: yellow; width: 30%; }

<table>
    <tr>
        <td class="graph">
            <div class="bar green"></div>
            <div class="bar red"></div>
            <div class="bar yellow"></div>            
        </td>
    </tr>
</table>

如果您需要绿色div来填充整个背部区域（100％），那么我会在绿色div中放置红色和黄色。然后将它们向右浮动并使用百分比来确定它们的大小。

http://jsfiddle.net/y9UqN/1/

td { border: 1px solid gray;  height: 50px; width: 300px; }
td.graph div {
    height: 18px;
}
.green { background: green; width: 100%; }
.bar { float: right; }
.red { background: red; width: 10%; }
.yellow { background: yellow; width: 30%; }

<table>
    <tr>
        <td class="graph">
            <div class="green">
                <div class="bar red"></div>
                <div class="bar yellow"></div>    
            </div>                    
        </td>
    </tr>
</table>

Answer 2

您可以在CSS中设置一个新类来处理您想要变成黄色的新td。

td.graph .yellow {
 background: yellow;
 //any other css you want here
}

然后您只需添加<div class="yellow">

即可

试图在桌子上找到彩色条

2 个答案: