Question

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

所以问题是：我有一个DIV并且在其中我需要将任意数量的<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＆amp; Chrome上工作

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

谢谢！

更新：解决了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' })

);

$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

我认为这就是你所追求的：

http://jsfiddle.net/d4Yft/

Answer 3

<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;”对于孩子们来说。

编辑：

http://jsfiddle.net/XDwNa/

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

3 个答案: