在HTML/CSS中创建浮动标签
在HTML/CSS中创建浮动标签
提问于 2015-07-24 18:32:32
有人能帮我为下面创建html吗？我正在创建一个简单的html进度跟踪器，它看起来类似于堆叠条形图。我想显示指向图中每个堆栈的标题标签。我怎么能这么做？它应该在IE8上工作。
到目前为止，我已经创建了一个小提琴琴键，但是无法创建标题标签，您可以在图中看到
<div class="colWrapper">
<div class="bar" style="background-color:#4cff00;width:40%">
<div align="center" class="barLabel"><span>Done</span></div>
</div>
<div class="bar" style="background-color:#ff0000;width:5%">
<div align="center" class="barLabel"></div>
</div>
<div class="bar" style="background-color:#00ffff;width:50%">
<div align="center" class="barLabel"><span>Pending</span></div>
</div>
<div class="bar" style="background-color:#0094ff;width:5%">
<div align="center" class="barLabel"><span></span></div>
</div>
</div>下面是我想要创建的原型，
回答 4
Stack Overflow用户
回答已采纳
发布于 2015-07-24 19:29:49
这个怎么样？尝试使用伪元素(：前/:后)，
把它们固定在栏杆上和下面。
我做了一个快速的小提琴，展示了其中一个:由ie8支持的
https://css-tricks.com/browser-support-pseudo-elements/
https://jsfiddle.net/skyz37f9/5/
<-- i did a quick test on browserstack to confirm ie8希望这能有所帮助
Ps u还可以组合悬停:后置(如果你只想在悬停上显示)
.colWrapper{
margin-top:50px;
height:60px;
width:500px;
position:relative;
border:1px solid #ccc;
}
.barContainer{
position:absolute;
bottom:0;
height:100%;
}
.bar{
height:100%;
float:left;
font-size:12px;
position: relative;
}
.bar1:after {
content: 'Start Date: \A Jan 1st, 2014';
position: absolute;
top: -50px;
width: 100%;
white-space: pre;
}
.bar1:before {
content: '';
border-left: 3px solid black;
height: 20px;
width: 100%;
position:absolute;
top: -20px;
}
.bar2:hover:after {
content: 'Impeded';
position: absolute;
bottom: -35px;
width: auto;
white-space: pre;
text-align: center;
margin-left: -35%;
}
.bar2:hover:before {
content: '';
border-left: 3px solid black;
height: 20px;
width: 100%;
position:absolute;
bottom: -20px;
left: 50%;
margin-left: -3px;
}
.barLabel{
margin-top:10px;
}<div class="colWrapper">
<div class="bar bar1" style="background-color:#4cff00;width:40%">
<div align="center" class="barLabel"><span>Done</span></div>
</div>
<div class="bar bar2" style="background-color:#ff0000;width:5%">
<div align="center" class="barLabel"></div>
</div>
<div class="bar" style="background-color:#00ffff;width:50%">
<div align="center" class="barLabel"><span>Pending</span></div>
</div>
<div class="bar" style="background-color:#0094ff;width:5%">
<div align="center" class="barLabel"><span></span></div>
</div>
</div>
Stack Overflow用户
发布于 2015-07-24 19:39:51
.colWrapper {
height: 60px;
width: 500px;
position: relative;
border: 1px solid #ccc;
padding: 2em;
}
.barContainer {
position: absolute;
bottom: 0;
height: 100%;
}
.bar {
height: 100%;
float: left;
font-size: 12px;
}
.barLabel {
margin-top: 10px;
}
.bar {
position: relative;
}
.label-below {
position: absolute;
top: 100%;
}
.label-above {
position: absolute;
bottom: 100%;
}<div class="colWrapper">
<div class="bar" style="background-color:#4cff00;width:40%">
<div align="center" class="barLabel"><span>Done</span>
</div>
<div class="label-above">Start Date:
<br>1 Jun 2000</div>
</div>
<div class="bar" style="background-color:#ff0000;width:5%">
<div align="center" class="barLabel"></div>
<div class="label-above">Today: Mar 2 2014</div>
<div class="label-below">Impeeded</div>
</div>
<div class="bar" style="background-color:#00ffff;width:50%">
<div align="center" class="barLabel"><span>Pending</span>
</div>
</div>
<div class="bar" style="background-color:#0094ff;width:5%">
<div align="center" class="barLabel"><span></span>
<div class="label-above">End Date: Dec 31 2014</div>
<div class="label-below">Future Enhancement</div>
</div>
</div>
</div>
Stack Overflow用户
发布于 2015-07-24 20:12:35
另一种更干净灵活的方法是这样的。
这样你就可以避免绝对的定位问题。我喜欢HTML结构的样子。
/*the entire bar */
.bar {
box-sizing: border-box;
margin: 0px;
padding: 0px;
width: 100%;
list-style: none;
}
/*each bar segment */
.bar li {
display: inline-block;
-border: 1px solid black;
margin: 0px;
padding: 0px;
box-sizing: border-box;
float: left;
}
/*each bar segment fill thing*/
.bar li div {
background: gray;
height: 50px;
margin: 0px;
padding: 0px;
box-sizing: border-box;
text-align: center;
}
/*segments labels*/
.bar li label {
display: block;
text-align: center;
}
.bar li:first-child label {
text-align: left;
}
.bar li:last-child label {
text-align: right;
}
/* arrow */
.bar label:last-child:before{
display: block;
content: "|";
}
.bar label:first-child:after{
display: block;
content: "|";
}<ul class="bar">
<li style="width: 20%">
<label>above</label>
<div style="background-color: red">inside</div>
<label>below</label>
</li>
<li style="width: 30%">
<label>above</label>
<div style="background-color: yellow">inside</div>
<label>below</label>
</li>
<li style="width: 20%">
<label>above</label>
<div style="background-color: blue">inside</div>
<label>below</label>
</li>
<li style="width: 30%">
<label>above</label>
<div style="background-color: magenta">inside</div>
<label>below</label>
</li>
</ul>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31617451
复制相关文章
相似问题
腾讯云开发者
