Gauge标记为动态内容做好准备

Question

我试图为量表创建标记，以显示邮件收件箱的完整程度，但我在动态部分方面遇到了一些问题。

＆＃13;

＆＃13;

body {
    background-color: #000;
    font-family: "Helvetica";
    margin: 35px 35px 35px 50px;
}

#gauge {
    -webkit-border-radius: 10px;
       -moz-border-radius: 10px;
            border-radius: 10px;

    background-color: #5E767D;
    border: 2px solid #FFF;
    color: #000;
    float: right;
    height: 260px;
    margin-left: 15px;
    overflow: hidden;
    text-align: center;
    width: 50px;
}
    
    #gauge div {
        display: block;
        overflow: hidden;
        padding-top: 5px;
        position: relative;
    }

    #gauge #current {
        font-size: 30px;
        font-weight: 900;
        z-index: 2;
    }

    #gauge #percentual {
        background-color: #FFF;
        font-weight: 800;
        z-index: 1;
    }

＆＃13;

<div id="gauge">
  <div id="current" style="height: 15%; top: 5%;">85</div>
  <div id="percentual" style="height: 85%;">100%</div>
</div>

＆＃13;

＆＃13;

＆＃13;

同样在JSFiddle;）

这个更新版本比以前更干净，效果更好，因为我不需要像以前那样以如此奇怪的方式操纵顶部属性，但它只适用于当前值 85 或更低。 o.O

我来到这个新标记背后的logocs是：

• 当前的值为百分比的高度 ;
• 它们之间的差异，当前的高度;
• 当前的高度减去10％，当前的顶部将数字粘贴到底部，保持他们两个在中间;

我怎么能解决这个问题，以便无论使用哪个数字都能使它工作？

Answer 1

文字没有按照我的意愿集中，但至少我不再有文字重叠，逻辑仍然很简单：

＆＃13;

＆＃13;

body {
    background-color: #000;
    font-family: "Helvetica";
    margin: 35px 35px 35px 50px;
}

#gauge {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;

  background-color: #5E767D;
  border: 2px solid #FFF;
  color: #000;
  float: right;
  height: 295px;
  margin: -7px 0 0 15px;
  overflow: hidden;
  text-align: center;
  width: 50px;
}

    #gauge .current {
      display: block;
      font-size: 22px;
      font-weight: 900;
      top: -15px;
      z-index: 2;
    }

      #gauge .current span {
        position: relative;
        top: 100%;
      }

    #gauge .percentual {
      background-color: #FFF;
      display: block;
      font-weight: 800;
      padding-top: 15px;
    }

      #gauge .percentual span {
        margin-left: -2px;
        position: relative;
        top: 15px;
      }

＆＃13;

<div id="gauge">

  <div class="current" style="height: 10%; top: 0%">
    <span>90</span>
  </div>

  <div class="percentual" style="height: 90%;">
    <span>100%</span>
  </div>

</div>

＆＃13;

＆＃13;

＆＃13;