-DEMO-

Question

如何在容器之前和之后附加文本，如下图所示。

<div class="volume-container">  
  <div class="pb1">
    <div id="progress-bar"></div>
  </div>
</div>

以下是我的小提琴。

http://codepen.io/anon/pen/cErwo

Answer 1

在div中使用display:inline-block。这使得div可以像内联元素一样工作，但允许您设置元素高度。另一种选择是使用float: left和阻止级别元素..但这种方式更好：

http://codepen.io/anon/pen/hsFLi

<强> HTML：

<div class="volume-container">
  <span>Pre</span>
  <div class="pb1">
    <div id="progress-bar"></div>
  </div>
  <span>after</span>
</div>

<强> CSS：

.volume-container {
  width: 100%;
  margin: 0 auto;
}

.pb1 {
    width: 17.5%;    
    border: 1px solid;
    background: #dddddd;
  display:inline-block;
}

#progress-bar, #progress-bar2 {
    width: 0;
    height: 20px;
    line-height: 20px;
    background: #79a151;
    font-family: calibri;
    color: white;
    display:inline-block;
    text-align: center;
    overflow: hidden;
}

Answer 2

-DEMO-

您可以在.pb1上使用Pseudo elements和data-* attributes，如下所示：

<强> HTML

<div class="volume-container">  
  <div class="pb1">
    <div id="progress-bar"></div>
  </div>
</div>

首先确保.pb1有position:relative并使用content:attr(data-percentage)" Usage";

<强>的CSS：

.volume-container {
  width: 100%;
  margin: 0 auto;
}

.pb1 {
    margin-left:100px;
    width: 17.5%;    
    border: 1px solid;
    background: #dddddd;
    position:relative;
}
.pb1:before,.pb1:after{
  position:absolute;
  top:0;
}
.pb1:before{
  left:-100px;
  content:"analysis volume"
}
.pb1:after{
  content:attr(data-percentage)" Usage";
  right:-100px;
}
#progress-bar, #progress-bar2 {
    width: 0;
    height: 13px;
    line-height: 20px;
    background: #79a151;
    font-family: calibri;
    color: white;
    text-align: center;
    overflow: hidden;
}

然后将$('.pb1').attr('data-percentage',width);设置为.pb1

<强> JS：

var progressBar = $('#progress-bar'),
    width = 0;

progressBar.width(width);


var interval = setInterval(function() {
    width += 1;
    $('.pb1').attr('data-percentage',width);
    progressBar.css('width', width + '%');
    document.getElementById("progress-bar").innerHTML = width;
    if (width >= 100) {
        clearInterval(interval);
    }
}, 100);

在容器之前和之后附加文本

2 个答案:

-DEMO-