Emil Gurbanov Emil Gurbanov - 3 months ago 10
CSS Question

Position absolute divs on the same distance between each other

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.

enter image description here

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

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