php - 试图在表格中获得彩色条

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>