我对css
非常陌生,所以请随身携带。使用css创建此图表
我需要使用CSS
将此图片创建到我的HTML
中。
正如你所看到的,在两个bar graphs aligned to the right
。每个条形图都有一组条形图,数字和文本。文本是左对齐的右边,数字右边对齐右边,每个栏位于文本和数字之间。
就像我说的,我没有这个级别的CSS的了解,所以请把这个作为一个css newbie
的任何信息,将不胜感激。
UPDATE
我还没有试过制造这个的任何代码。我不知道如何处理这个任务。
所以我能够得到左侧的文字,但我无法获得正确的价值。它显示为右侧
这里一个新的生产线是我的CSS:
.container {
width: 500px;
margin-bottom: 20px;
margin-top: 10px;
background: #fff;
padding-bottom: 20px;
padding-top: 10px;
overflow: hidden;
float: left;
}
.horizontal .progress-bar {
float: left;
height: 45px;
width: 100%;
padding: 12px 0;
}
.horizontal .progress-track {
position: relative;
width: 50%;
height: 20px;
background: #FFFFFF;
float:right;
margin-left:-20px;
}
.horizontal .progress-fill {
position: relative;
background: #2272af;
height: 20px;
width: 50%;
color: #fff;
text-align: center;
font-family: "Lato","Verdana",sans-serif;
font-size: 12px;
line-height: 20px;
border-radius: 5px;
}
.horizontal .progress-bar-label
{
position:relative;
display:inline-block;
white-space:nowrap;
padding-left:215px;
}
.horizontal .progress-bar-value
{
position:relative;
display:inline-block;
white-space:nowrap;
padding-right:-15px;
/**padding:0;*/
}
这里是我的HTML:
<div class="progress-bar horizontal">
<span class="progress-bar-label">test</span>
<div class="progress-track">
<div class="progress-fill" style="width: 100%;">
</div>
</div>
<span class="progress-bar-value">125</span>
</div>
不太知道怎么去图表右侧的值125
请分享你已经测试的代码。 –
@SebassvanBoxel请参阅更新 – jkushner
请检查此代码作为开始,然后编辑您的答案。 http://codepen.io/anon/pen/OyBWEL –