Question

我必须使用简单的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代码。任何帮助将不胜感激。提前谢谢。

Answer 1

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

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

DEMO

Answer 2

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

.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/

Answer 3

<强> JSFiddle Demo

绝对定位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>

用于制作简单图形的CSS

3 个答案: