CSS栏上的大多数示例都展示了如何制作包装器,并且有一个从左到右的内部栏。
我希望组合 2 个小节,从左到右一个,但在同一高度上,从右到左有一个小节。
到目前为止,我有:
<div id="skills">
<div class="grid left">
<div class="bar pct-75"><div class="inner"></div> </div>
</div>
<div class="labels">
<p>Label</p>
</div>
<div class="grid right">
<div class="bar pct-75"><div class="inner"></div> </div>
</div>
</div>
和 CSS:
.grid {
border-left: 1px dotted #e8ab6a;
border-bottom: 1px dotted #e8ab6a;
float: left;
padding: 10px 0;
position: relative;
}
.bar {
height: 15px;
margin-bottom: 20px;
position: relative;
width: 100%;
z-index: 1;
.inner {
background-color: #feac40;
position: absolute;
bottom: 0;
left: 0;
top: 0;
}
}
小提琴:http://jsfiddle.net/f8WKt/
从右到左制作条形图的诀窍是什么?
尝试添加
.left .bar.pct-75 .inner {
left: 25%;
right: 0;
}
http://jsfiddle.net/f8WKt/3/
假设您想加入中间的 2 个柱线
我提供了一个我认为你问过的例子
演示 http://jsfiddle.net/f8WKt/5/
我已经在拉力定位div 中使用了绝对位置。右边有right: 0;
,左
left: 0;
.inner {
background-color: #feac40;
position: absolute;
width: 80%;
bottom: 0;
top: 0;
}
.right .inner {
right: 0;
}
.left .inner {
left: 0;
}
我在它们周围设置了一个边框,以明确一个是从左到右,另一个是从右到左。
right:
0 添加到右侧栏。
小提琴:http://jsfiddle.net/5SUVb/