javascript - 在另一个 DIV 中动态添加一组 DIV

Question

CSS 不是我真正喜欢的东西，当我看到相对位置、静态位置或绝对位置时，我的头开始旋转 :(

所以问题是:我有一个 DIV，我需要在其中放置任意数量的 <div>。 s 水平对齐。这将在运行时完成，因为我不知道 DIV 的数量，也不知道设计时每个 DIV 的宽度。例如，假设我要添加以下 DIV 数组:

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

• 第一个 DIV 需要填充父 DIV 的 0% 到 40%，BG 颜色为红色
• 第二，从 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、FF 和 Chrome 上工作)

此外，如果有一种方法可以让多个背景颜色在父 DIV 上水平对齐，只要可以指定填充百分比，就可以实现相同的效果。

谢谢!

更新:使用 ShankarSangoli 方法解决，这里是稍作修正的解决方案:



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

<p>var $sliderDiv = $("#slider-addon");</p>

<p>$.each(_aDIVs, function(i, val) {</p>

<pre><code>$sliderDiv.append(

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

);
</code></pre>



});


谢谢你:)

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)+"%"}));
});