将绝对div彼此之间的距离相同

Question

I have a relative positioned container with many absolute positioned divs inside. I need to position the inners div in the way they are on the same distance between each other using CSS 'left' property.

I can achieve by setting fixed left values to each of them, but prefer to use a function which calculates it regardless how many inner divs a have.

So the desired result is illustrated on the picture below and following by the code I have at the moment. Basically I've just stuck with calculations :)

Thanks in advance for any help.

HTML

<div id="bubbles-container" populate-bubbles></div>

CSS

#bubbles-container{
   position: relative;
   width: 100%;
   height: 300px;
}
.bubble {
   position: absolute;
   border: 1px solid rgba(0, 0, 0, 0.2);
   bottom: 0;
   border-radius: 10px;
   height: 15px;
   width: 15px;
}

JS/ANGULAR

app.directive('populateBubbles', [function(){
    return function(scope, element, attr){
        console.log(element);
        for (i = 1; i <= 10; i++){
            element.append('<div class="bubble bubble' + i + '"></div>');
        }

        element.find('.bubble').each(function(){
            var bubbleLength = $(this).length;
            var bubbleWidth = $(this).width();
            var containerWidth = element.width();

            ...
        })
    }
}])

Answer 1

Do not bother you with absolute positions, use flex. You won't have to calculate :

#bubbles {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

Look at this -> https://jsbin.com/gepufuy/1/edit?html,css,js,output

Answer 2

If you really cannot use flexbox, here is an other solution using

display: table;
display: table-cell;

Which is compatible with IE10.
-> https://jsbin.com/gepufuy/6/edit?html,css,js,output

Answer 3

With jQuery, you can try something like this:

var i = 0;
var container_width = $('#bubbles-container').width();
var bubble_number = $('.bubble').length;

$('.bubble').each(function() {

    var left_space = (container_width / bubble_number) * i;
    $(this).css({left: left_space + 'px'});

    i++;
});