欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS 說明橫向進(jìn)度條最后顯示文字的實現(xiàn)代碼

  發(fā)布時間：2020-11-10 09:43:21   作者：胖鵝68   我要評論
這篇文章主要介紹了CSS 說明橫向進(jìn)度條最后顯示文字的實現(xiàn)代碼,代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

問題描述

在工作中想要實現(xiàn)如下效果：

在這里插入圖片描述

解決思路

在 div 標(biāo)簽中添加一個 relative 定位，然后使用絕對定位 absolute 在最右側(cè)

<div class="content">
  <div class="bar first" style="width:100%">
    <span>688</span>
  </div>
  <div class="bar second" style="width:50%">
    <span>688</span>
  </div>
  <div class="bar third" style="width:80%">
    <span>688</span>
  </div>
</div>

自己的解決辦法

.bar {
  height: 12px;
  margin-top: 1px;
  position: relative;
  &.first {
    background-image: linear-gradient(90deg, #ecf848 0%, #f9eab9 99%);
  }
  &.second {
    background-image: linear-gradient(90deg, #f5b549 0%, #f9d6b9 100%);
  }
  &.third {
    background-image: linear-gradient(90deg, #f57849 0%, #f9c7b9 100%);
  }
  span{
    position: absolute;
	right: 0;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
  }
}

結(jié)果：

按照上面的寫法，只能是 span 標(biāo)簽的最右側(cè)和父標(biāo)簽div 的最右側(cè)重疊，無法實現(xiàn)目標(biāo)。解決辦法，計算 span標(biāo)簽的值，然后right 設(shè)置為計算的長度

在這里插入圖片描述

考慮到上述實現(xiàn)需要依賴于js,而且過于麻煩，想想有沒有辦法只通過CSS實現(xiàn)目標(biāo)呢？

解決辦法一： left: 100%;

.bar {
  height: 12px;
  margin-top: 1px;
  position: relative;
  &.first {
    background-image: linear-gradient(90deg, #ecf848 0%, #f9eab9 99%);
  }
  &.second {
    background-image: linear-gradient(90deg, #f5b549 0%, #f9d6b9 100%);
  }
  &.third {
    background-image: linear-gradient(90deg, #f57849 0%, #f9c7b9 100%);
  }
  span{
    position: absolute;
    left: calc(100% + 8px);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
  }
}

left 參照的寬度是 父容器 的寬度

解決辦法二： right:0; transform: translate(100%, 0)

.bar {
  height: 12px;
  margin-top: 1px;
  position: relative;
  &.first {
    background-image: linear-gradient(90deg, #ecf848 0%, #f9eab9 99%);
  }
  &.second {
    background-image: linear-gradient(90deg, #f5b549 0%, #f9d6b9 100%);
  }
  &.third {
    background-image: linear-gradient(90deg, #f57849 0%, #f9c7b9 100%);
  }
  span{
    position: absolute;
    right:0;
    transform: translate(100%, 0);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
  }
}

transform: translate 參照的寬度是自身內(nèi)容的寬度

到此這篇關(guān)于CSS 說明橫向進(jìn)度條最后顯示文字的實現(xiàn)代碼的文章就介紹到這了,更多相關(guān)css橫向進(jìn)度條顯示文字內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論