html - 元素数量可变的动态 CSS

Question

所以我有一些生成表格的代码(尽管没有使用表格标签，因为那显然是错误的!)，其中每一行都有一个根据百分比着色的条。这是目前使用内联样式完成的，如下所示(使用 smarty 模板系统)。

我想将这些样式移动到样式表中，但我不确定如何使类动态化，因为我不知道会有多少行。

<div class="fullbar">
    <div class="bar">
    {if $responses[all].responses eq 0}
        <div class="innerbar allna" style="width: 100%;">&nbsp;All responses marked as n/a</div>
    {elseif $responses[all].score lt $withholdBelow}
        <div class="innerbar shortbar" style="width: {$withholdBelow * 10}%;">&nbsp;Withheld - Less than {$withholdBelow}</div>
    {else}
        {if $responses[all].responses lt 4}
            <div class="innerbar na" style="width: {$responses[all].score * 10}%;">&nbsp;Two or more responses n/a</div>
        {else}
            <div class="innerbar" style="width: {$responses[all].score * 10}%;"></div>
        {/if}
    {/if}
    </div>
    <div class="scale-container-results">
        <div class="scaleleft-results">Totally Disagree</div>
        <div class="scalecenter-results">Neutral</div>
        <div class="scaleright-results">Totally Agree</div>
    </div>
</div>

我问的是可能的吗？如果可能的话如何？

Answer 1

我认为您正在尝试创建一个进度条。将类用于共享属性和内联样式来设置动态属性并没有错，例如a width: 43%; 作为进度条的百分比，就像您已经做的那样。

例如 Bootstrap 就是这样做的，参见 http://getbootstrap.com/components/#progress