javascript - 将绝对 div 放置在彼此之间相同的距离上

Question

我有一个相对定位的容器，里面有许多绝对定位的 div。我需要使用 CSS“左”属性将内部 div 定位为它们彼此之间的距离相同。

我可以通过为它们中的每一个设置固定的左值来实现，但更喜欢使用一个函数来计算它，而不管一个有多少内部 div。

因此，下图说明了所需的结果，后面是我目前拥有的代码。基本上我只是坚持计算:)

在此先感谢您的帮助。

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

不要用绝对位置来打扰你，使用 flex。您无需计算:

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

看看这个 -> https://jsbin.com/gepufuy/1/edit?html,css,js,output