创建轮询结果的彩条 [英] Creating colored bars for poll results

问题描述

在我的网络应用中，我想用长度与投票百分比成比例的彩条显示投票结果。如何用HTML / CSS实现这一点？

解决方案

以下是一些示例代码：

 < style> 
 .GraphWrapper {
 width：300px; 
 border：1px solid #DDDDDD; 
} 
 
 .BlueBar {
 height：30px; 
 margin：10px 0px 10px 0px; 
背景颜色：#FFCCCC; 
} 
 
 .RedBar {
 height：30px; 
 margin：10px 0px 10px 0px; 
 background-color：#CCCCFF; 
} 
< / style> 
 
< div class ='GraphWrapper'> 
< div class ='BlueBar'style ='width：50％;'>< / div> 
< div class ='RedBar'style ='width：75％;'>< / div> 
< / div> 
  

然后，您可以编辑图形条的宽度样式图形百分比。

In my web app I'd like to display poll results with colored bars with length proportional to the percentage of votes. How can I achieve this with HTML/CSS?

解决方案

Here is some example code:

        <style>
        .GraphWrapper {
            width:300px;
            border:1px solid #DDDDDD;
        }

        .BlueBar {
            height:30px;
            margin:10px 0px 10px 0px;
            background-color:#FFCCCC;
        }

        .RedBar {
            height:30px;
            margin:10px 0px 10px 0px;
            background-color:#CCCCFF;
        }
    </style>

    <div class='GraphWrapper'>
        <div class='BlueBar' style='width:50%;'></div>
        <div class='RedBar' style='width:75%;'></div>
    </div>

You can then edit the width style of your graph bars to achieve the graph percentage.

这篇关于创建轮询结果的彩条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！