動態添加一組的DIV的另一個DIV內

Question

CSS是不是真的我的事，我一見的相對位置，靜態的或絕對的我的頭開始旋轉:(

所以，問題是：我有一個DIV和內我需要把任意數量的<div>s對齊水平。這將在運行時完成，因爲我不知道DIV的數量，也沒有在設計時每個人的寬度。 例如讓我說我有以下數組的DIV添加：

_aDIVs = [[40, '#red'], [10, '#green'], [40, '#blue'], [10, '#brown']]; 

• 首先DIV需要填補從0％到父DIV和BG顏色的40％是從41％紅色
• 第二至50％，BG彩色綠色
• 三從51％至90％，藍色
• 第四個從91％到100％，棕色

每個DIV都有不同的背景顏色，％只在運行時才知道。使用％很重要，否則在瀏覽器窗口重新調整大小時填充將會中斷。我們的想法是這樣的：（！對不起我的繪畫技巧）

|--------------------- PARENT DIV ---------------------| 

|------RED------||-GREEN-||-----BLUE-----||-BROWN-| 

眼下，父DIV是使用絕對位置，這裏的確切聲明：

div id="slider-addon" style="height: 5px; position: absolute; bottom: 0px; width: 100%; background-color: red; "> 

我不關心是否有一個晦澀的詭計，其中第一個DIV填充100％，然後它被下一個<div>等重疊，只要訣竅是跨瀏覽器兼容（需要在IE瀏覽器上工作，需要在Chrome瀏覽器上工作）

此外，如果有一種方法可以在父DIV上水平對齊多個背景顏色，只要能夠指定填充％，就可以實現相同的效果。

謝謝！

UPDATE： 與ShankarSangoli方法來解決，這裏有一個小幅調整的解決方案：

var _aDIVs = [[40, '#3399FF'], [10, '#33CC33'], [40, '#FFCC00'], [10, '#CC66FF']];

var $sliderDiv = $("#slider-addon");

$.each(_aDIVs, function(i, val) {

$sliderDiv.append(

     $('<div></div>').css({ 'float': 'left', 'width': val[0] + '%', 
       'background-color': val[1], 'height': '5' }) 

); 

});

謝謝:)

Answer 1

不能有多種背景顏色的任何元素。爲了實現你的目標，你可以嘗試這樣的事情。要設置背景顏色和其他樣式可以使用CSS如下

#red{ 
    background-color: red; 
} 

#blue{ 
    background-color: blue; 
} 

var $sliderDiv = $("#slider-addon"); 
var sliderWidth = $sliderDiv.width(); 

$.each(_aDivs, function(i, val){ 
    $sliderDiv.append($(val[1]).css({float:"left":width:parseInt((sliderWidth*val[0])/100)+"%"})); 
}); 

Answer 2

<div id="foo" style="width: 100px;"> 
    <div style="background-color: blue; width: 25px; height: 15px; display: inline-block;"></div> 
    <div style="background-color: red; height: 15px; width: 15px; display: inline-block;"></div> 
    <div style="background-color: green; height: 15px; width: 20px; display: inline-block;"></div> 
</div> 

使用 「display：inline-block的;」爲孩子divs。

編輯：

http://jsfiddle.net/XDwNa/

Answer 3

我覺得這是你追求的：

http://jsfiddle.net/d4Yft/