0

我必须使用简单的 CSS 制作图表。在此图表中，显示灰色背景色，并在其顶部显示不同宽度的蓝色背景色，显示加载的项目数。这个例子请参考我的 jsfiddle。它位于http://jsfiddle.net/mzCdb/1/。

我的代码的问题是，当蓝色部分的宽度为 50% 时，我希望蓝色和灰色部分之间的“4/10”重叠，这与我小提琴中的第二张图不同。以下是我的 html 代码：-

<div class="graph">
<div class="graph-within">
</div>
<div style="text-align:center;float:left;color:#888;font-weight:bold;
font-family:Tahoma;font-size:15px;">4/10</div>
</div>

请查看小提琴中的 CSS 代码。任何帮助将不胜感激。提前致谢。

4

3 回答 3

1

您绝对可以在图表中定位文本：

.graph .text {
    position: absolute;
    z-index: 1;
    top: 0;
    height: 25px;
    text-align: center;
    width: 100px;
}

演示

于 2013-06-24T12:23:35.367 回答
0

使用负边距使模糊条不占空间。

.graph{
background:#e5e5e5;
height:25px;
width:100px;
overflow: hidden;
}
.graph-within{
background:#0088cc;
margin-right: -100%;
height:100%;
width:40%;
float:left;
}
.label{
text-align:center;
margin-right: 5px;
color:#888;
font-weight:bold;
font-family:Tahoma;
font-size:15px;
}

http://jsfiddle.net/mzCdb/2/

于 2013-06-24T12:24:01.150 回答
0

JSFiddle 演示

绝对定位4/10元素。

CSS

.graph {
    background:#e5e5e5;
    height:25px;
    width:100px;
    position:relative;
}
.graph-within {
    background:#0088cc;
    height:100%;
    width:40%;
    float:left;
}
span {
    position:absolute;
    top:2px;
    left:0;
    width:100%;
    text-align:center;
    float:left;
    color:#888;
    font-weight:bold;
    font-family:Tahoma;
    font-size:15px;
}

HTML

<div class="graph">
    <div class="graph-within"></div>
<span>4/10</span>

</div>
<br>
<br>
<div class="graph">
    <div class="graph-within" style="width:70%;"></div>
<span>4/10</span>

</div>
于 2013-06-24T12:25:33.753 回答