Javascript 在另一个DIV中动态添加一组DIV

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

所以问题是：我有一个DIV，在它里面我需要把任意数量的

水平对齐。这将在运行时完成，因为我不知道设计时每个DIV的数量和宽度。 例如，假设我要添加以下div数组：

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

• 第一个DIV需要填充父DIV的0%到40%，背景颜色为红色
• 第二，BG颜色为绿色，从41%降至50%
• 第三，从51%到90%，蓝色
• 第四，从91%到100%，棕色

每个DIV都有不同的背景色，%仅在运行时才知道。使用%非常重要，因为否则当浏览器窗口重新调整大小时填充将中断。其想法如下：

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

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

（对不起我的绘画技巧！）

现在，父DIV正在使用position absolute，下面是确切的声明：

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

我不在乎是否有一个晦涩难懂的把戏，第一个DIV填充100%，然后它被下一个

重叠，等等，只要把戏是跨浏览器兼容的（需要在IE、FF和Chrome上工作）

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

谢谢

更新： 使用ShankarSangoli方法求解，以下是经过轻微修正的解：

变量aDIVs=[40'，[3399FF']，[10'，[33CC33']，[40'，[FFCC00']，[10'，[CC66FF']

var$sliderDiv=$（“#slider addon”）

$。每个（_aDIVs，函数（i，val）{

$sliderDiv.append(
$（''）.css（{'float'：'left'，'width'：val[0]+'%，
“背景色”：val[1]，“高度”：“5}）
);

}))；

谢谢：）

对子div使用“display:inline block；”

编辑：

---

任何元素都不能有多个背景色。为了实现你的目标，你可以尝试这样的事情。要设置背景色和其他样式，可以使用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)+"%"}));
});

---

我想这就是你想要的：

---

我提到的关于部门职位的页面很棒吗？你的问题是什么？您是否在将div对齐到一条线上而不是在另一条线上时遇到问题？如果是这样，您需要使用display:inline；在每个子div的样式中，问题是，给定“\u aDIVs”，我如何将div放入父“slider addon”中，使其按说明显示。在发布问题之前，我开始阅读建议网站。。。通过4个标签（作者混合了相对和绝对），我已经迷路了。无论如何，谢谢。只有当你的值加起来是100，也就是说，它们是百分比时，这才有效。如果您不能保证这一点，您将需要另一种解决方案。我不知道设计时div的数量或宽度%。您可能需要两个循环：一个循环遍历并相加以获得总值。第二个循环将获取每个div的单个值，除以总值以获得父div的百分比宽度。您不希望在同一范围内声明两次

i

。只需在var total-0旁边声明一次并在每个循环内设置其值。给每个循环一个单独的迭代器会比较容易混淆。看起来很有希望，我正试图让它工作，因为$。每个都没有迭代数组。确保数组格式正确并且页面上没有js错误。嗯。。。。。。就我所知，你不需要计算任何东西。。。你看到我的JSFIDLE了吗？是的，你是对的，没有必要计算，因为“浮动左”我还不能投票（没有足够的代表），但我把它标记为答案。

<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>

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