什麼是輪詢結果欄的好技術？

Question

我正在創建一些輪詢軟件，目前正在研究做輪詢結果圖形條的技術。沒什麼複雜的，只是一些簡單的結果吧。

我想知道是否有任何嘗試和真正的最佳方法。我想到的最好的方法是爲每個小節設置一個div容器，然後將圖像或其他元素設置爲與選項結果百分比（內聯css）相等的大小（寬度）。

這

強大的文本

// Option 1 Results 
<div> 
    <span style="background-color: #ff0000; width: 33%"></span> 
</div> 

// Option 2 Results 
<div> 
    <span style="background-color: #ff0000; width: 16%"></span> 
</div> 

等例子......

任何知道有什麼更好的技術，或者這是非常多大多辦呢？

Answer 1

是的，這是一個很好的方法。

這是同樣的想法更細化：

Live Demo

HTML：

<div class="pollBars"> 
    <span class="t1" style="width: 10%">69</span> 
    <span class="t1" style="width: 20%">100</span> 
    <span class="t1" style="width: 70%">200</span> 
    <span class="t2" style="width: 90%">666</span> 
    <span class="t2" style="width: 120%">Over 9000!!</span> 
</div> 

CSS：

.pollBars { 
    width: 300px; 
    background: #ccc 
} 
.pollBars span { 
    display: block; 

    padding: 3px; 
    margin: 7px 0; 

    font: bold 14px/1 sans-serif; 

    -moz-border-radius: 4px; 
    border-radius: 4px; 

    text-shadow: 1px 1px 1px #444; 
} 

.t1 { 
    color: #fff; 

    border: 1px solid red; 

    background: #f85032; /* old browsers */ 
    background: -moz-linear-gradient(top, #f85032 0%, #f16f5c 50%, #f6290c 51%, #f02f17 71%, #e73827 100%); /* firefox */ 

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f85032), color-stop(50%,#f16f5c), color-stop(51%,#f6290c), color-stop(71%,#f02f17), color-stop(100%,#e73827)); /* webkit */ 

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f85032', endColorstr='#e73827',GradientType=0); /* ie */ 
} 

.t2 { 
    color: #fff; 

    border: 1px solid blue; 

    background: #6db3f2; /* old browsers */ 
    background: -moz-linear-gradient(top, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); /* firefox */ 

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6db3f2), color-stop(50%,#54a3ee), color-stop(51%,#3690f0), color-stop(100%,#1e69de)); /* webkit */ 

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0); /* ie */ 
}