进度条在HTML/CSS

dd { 
    /*position: relative; /* IE is dumb */ 
    display: block;     
    float: left;  
    width: 500px; 
    height: 16px; 
    margin: 0 0 2px; 
    background: url("white3.gif"); 
} 

dd div.blue { 
    /*position: relative; */ 
    background: url("blue.gif"); 
    height: 16px; 
    width: 75%; 
    text-align:right; 
    display:block; 
}

HTML：进度条在HTML/CSS

<dd> 
    <div class="blue" style="width:35%;"> 
</dd>

这将创建一个白色的酒吧和带蓝色的35％填充它。

现在我想用两个不同的值填充相同的进度条。例如，如果数值A为30％，数值B为40％，则条纹的70％会被填充，但每种颜色的百分比可以通过颜色的差异来看。价值A和B可以以任何顺序出现在酒吧上，只要我可以告诉他们有两种不同的东西，并且“看到”每个人都有多少。

有什么建议吗？

谢谢。

来源

2009-02-25 T.T.T.

你在找这样的事吗？

CSS：

div.dd { 
    /*position: relative; /* IE is dumb */ 
    display: block;     
    float: left;  
    width: 500px; 
    height: 16px; 
    margin: 0 0 2px; 
    background: #fff; 
} 

div.dd div.blue { 
    /*position: relative; */ 
    background: #00f; 
    height: 16px; 
    width: 75%; 
    text-align:right; 
    display:block; 
    float: left; 
} 
div.dd div.red { 
    /*position: relative; */ 
    background: #f00; 
    height: 16px; 
    width: 75%; 
    text-align:right; 
    display:block; 
    float: left; 
}

HTML：

<div class="dd"> 
    <div class="blue" style="width:35%;"></div> 
    <div class="red" style="width:10%;"></div> 
</div>

我不知道为什么你使用dd标签（对我来说，这个标签引起的div呈现DD标签下方，而不是内部）。

来源

2009-02-25 22:32:47 jennyfofenny

是的。谢谢。这是一个非常干净的方式来做到这一点。 – 2009-02-25 23:06:23

我建议在其上层叠另一个栏并根据需要左右移动它。

如果酒吧不应该延长视口的长度，你可以把它们放在一个溢出的div：隐藏，以保持幻想完好无损。

编辑：

我想通了，为什么我想这样做的，而不是跟着你会开始的。当我以前做过类似的事情时，它使用的是图像，在这种情况下，改变宽度会改变重叠的图像。

只有普通的颜色，我敢肯定，只要使用尺寸就可以脱身。但是我仍然会使用CSS来叠加一层。

来源

2009-02-25 21:57:48

例子？这些值每隔几分钟就会改变一次，所以当第一个值降低到5％时，将第二个值移到右侧将不起作用。我需要值B来“追加”。 – 2009-02-25 22:11:30

-1

<div style="height: 5px; background-color: green; width: 100%;"> 
    <div id="progress_bar" style="height: 5px; background-color: red; width: 10%;"></div> 
</div>

而在这之后：

$('#progress_bar').css('width', '30%');

来源

2013-01-18 16:27:30 Dalibor

<div class="progressbar"> 
    <div class="inner1" style="width: 30%; background-color: blue;"><b>Value A</b></div> 
    <div class="inner2" style="width: 40%; background-color: red;"><b>Value B</b></div> 
</div>

然后CSS：

.progressbar { 
    background-color: #1e1e1e; 
    color: white; 
    height: 25px; 
    width: 115px; 
} 
.inner1, .inner2 { 
    height: 100%; 
    /* Change width with javascript */ 
}

如果你只是想在进度条中的一个值，有一个教程here。

来源

2016-11-12 17:16:00 IamGuest

进度条在HTML/CSS

回答

相关问题