javascript - 在 HTML/CSS 中创建 float 标签

Question

有人可以帮我为下面创建 html 吗？ 我正在创建一个简单的 html 进度跟踪器，它看起来类似于堆叠条形图。我想显示指向图中每个堆栈的标题标签。我怎样才能做到这一点？它应该适用于 IE8。

这是我到目前为止创建的 fiddle jsfiddle link , 但无法创建您在图表周围看到的标题标签

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

下面是我正在尝试创建的原型(prototype)，

Answer 1

这个怎么样？ 尝试使用伪元素，(:before/:after),

并将它们绝对定位在条形图上方和下方。

我做了一个快速的 fiddle ，展示了其中一个:它被 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 你也可以结合 hover:after (如果你只想在悬停时显示)

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