I'm struggling with positioning multiple absolute divs inside a relative container using the CSS 'left' property. I want these inner divs to be evenly spaced regardless of how many there are, without setting fixed values for each.
Currently, I'm stuck on the calculations needed to achieve this. I have provided a picture of the desired result below, along with the code I have so far.
Any help or guidance on this would be greatly appreciated!
https://i.sstatic.net/0nwpM.jpg
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();
...
})
}
}])