根据元素的数量划分元素宽度

Question

正如标题所说"根据元素的数量划分元素宽度"我希望有一个类似进度的栏,我可以在其中添加元素,并且根据我有进度条的元素量将分开.

这是现在的固定值(33%,33%和34%),我希望它们根据我使用的元素数量而改变.

就像我的列表中有4个元素一样,我希望它能自动与4分开.有没有简单的方法可以做到这一点？也许只使用CSS？我不介意javascript,但我只是说它可能是我错过的东西:)

编辑:我创建了3个div并给了他们所有不同的类.

<section class="progress-part-list">
    <div class="progress-part-left">

    </div>

    <div class="progress-part-right">

    </div>

    <div class="progress-part-mid">

    </div>
</section>

在我的CSS中,我的固定值是:

.progress-part-mid
{
    height: 100%;
    width: 34%;
    background-color: #52ff00;
    opacity: 0.9;
    display: block;
    float:left;
}

.progress-part-left
{
    height: 100%;
    width: 33%;
    background-color: red;
    opacity: 0.9;
    display: block;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
    float:left
}

.progress-part-right
{
    height: 100%;
    width: 33%;
    background-color: yellow;
    opacity: 0.9;
    display: block;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    float:right;
}

Answer 1

作为一个使用 javascript 的人，我首先想到的是在加载时运行一些 JavaScript，然后它可以遍历周围元素（带有 class 的元素progress-part-list）的 'child' 属性，然后除以100，然后将样式设置为该值。

下面是一些可以执行此操作的代码：

<script type="text/javascript">
var divd=100/(document.getElementsByClassName('progress-part-list')[0].children.length);
[].forEach.call(document.getElementsByClassName('progress-part-list')[0].children,function(curChild){
    curChild.style.width=divd+'%';
});
</script>

将其放在结束标记之后<section>

不过，这非常粗糙，您可能想要修复它以使其更加优雅（例如修改类样式而不是内联样式，遍历所有而不是仅第一个progress-part-list，等等

也是未经测试的