簡單的堆疊/分段的html欄

Question

與其試圖重新發明輪子，我希望有人可以闡明如何創建堆疊/分段的欄或指向現有控件。這是我需要：

1. 單槓
2. 標準的HTML
3. 每個段需要進行顏色從CSS
4. 每一段必須總數的百分比（即如果總價值= 100碼，然後是10對段中的一個的值將比值50）
5. 應該能夠無縫地裝配到一個HTML表格單元較小
6. 不應該是圖像
7. 應該只創建與段的單個杆（未多個條/分段條）
8. 生成服務器端，沒有AJAX

這應該是作爲值的可能給定的x數一樣簡單，創建X段。

我正在查找代碼示例或已經構建的控件。

編輯：爲完整：

int[] segments = { 10, 5, 45, 20, 20 }; 
Panel horizontalBar = new Panel(); 
for(int segmentIndex = 0; segmentIndex < segments.Length; ++ segmentIndex) 
{ 
    horizontalBar.Controls.Add(new Panel() { ID = String.Format("segment-{0}", segmentIndex), Width = Unit.Percentage(segments[segmentIndex]), CssClass = "segment" }); 
} 
this.Page.Form.Controls.Add(horizontalBar); 

Answer 1

HTML：

<div class="segment-bar"> 
    <div id="segment-1" width="10%" class="segment"></div> 
    <div id="segment-2" width="20%" class="segment"></div> 
    <div id="segment-3" width="70%" class="segment"></div> 
</div> 

CSS：

#segment-1 
{ 
    background: red; 
} 
#segment-2 
{ 
    background: blue; 
} 
#segment-2 
{ 
    background: green; 
} 

.segment 
{ 
    float: left; 
    height: 20px; 
} 

在ASP.NET中，你可以用一個簡單的for循環實現它，你可以將其封裝在服務器控件中。你還需要幫助嗎？