使用CSS製作堆疊條形圖：以寬度爲百分比的問題

我必須實現一個快速的n髒堆積條形圖，只有DIV s和SPAN s，此刻我頭腦中的想法變得像這：使用CSS製作堆疊條形圖：以寬度爲百分比的問題

<div style='width:500px'> 
    <span class='d5' style='width:33%;'>5</span> 
    <span class='d4' style='width:27%;'>4</span> 
    <span class='d3' style='width:20%;'>3</span> 
    <span class='d2' style='width:13%;'>2</span> 
    <span class='d1' style='width:6%;'>1</span> 
</div>

但這是行不通的。有人能幫我解決嗎？我認爲我需要使用position: absolute/relative和/或float在這裏，但一切都沒有什麼影響。

你能協助嗎？

來源

2011-05-31 5arx

感謝到目前爲止的所有建議。我設法使它看起來像這樣：http://ploader.net/files/32edfad45fb4b560a937b7dc06ad333b.PNG 與@ Vinnyq12的建議（即divs）。 – 5arx 2011-05-31 16:42:53

我會使用div而不是跨度，也給你的div高度，否則他們將不會顯示。如果你想讓div水平排列，則設置float：left;

來源

2011-05-31 16:19:42 Vinnyq12

它看起來像你只是缺少一個「顯示：塊;」在你的跨度。但無論如何，使用列表可以說是更多的語義，你需要做的就是設置寬度和顏色。

http://jsbin.com/ajuna4

來源

2011-05-31 16:26:36 amustill

div>span 
{ 
float: left; 
border: 1px solid yellow; 
background-color: green; 
text-align: center; 
}

Fiddle

來源

2011-05-31 16:26:55 Jawad

什麼？不，你正在向左飄浮？ – amustill 2011-05-31 16:29:52

使用CSS製作堆疊條形圖：以寬度爲百分比的問題

回答

相關問題