帶有CSS的條形圖，如何從底部到頂部填充，而不是從頂部到底部？

我有一個使用html和css的條形圖，我使用高度來顯示條的填充量。現在它可以工作，但它的工作順序與我想要的相反。當高度：0％時，酒吧被填滿100％。我嘗試將CSS更改爲「底部」而不是「頂部」，但是這沒有做任何事情。我怎樣才能改變這個「高度：100％」將使其100％填充？帶有CSS的條形圖，如何從底部到頂部填充，而不是從頂部到底部？

HTML：

 <div class="bars"> 
      <div><span style="height:0%;"></span></div> 
      <div><span style="height:10%;"></span></div> 
      <div><span style="height:20%;"></span></div> 
      <div><span style="height:30%;"></span></div> 
      <div><span style="height:40%;"></span></div> 
      <div><span style="height:50%;"></span></div> 
      <div><span style="height:60%;"></span></div> 
      <div><span style="height:70%;"></span></div> 
      <div><span style="height:80%;"></span></div> 
      <div><span style="height:90%;"></span></div> 
      <div><span style="height:100%;"></span></div> 
      <div><span style="height:100%;"></span></div> 
      <div><span style="height:90%;"></span></div> 
      <div><span style="height:80%;"></span></div> 
      <div><span style="height:70%;"></span></div> 
      <div><span style="height:60%;"></span></div> 
      <div><span style="height:50%;"></span></div> 
      <div><span style="height:40%;"></span></div> 
      <div><span style="height:30%;"></span></div> 
      <div><span style="height:20%;"></span></div> 
      <div><span style="height:10%;"></span></div> 
      <div><span style="height:0%;"></span></div> 
     </div>

CSS：

.bars{ 
    height: 48px; 
    display: block; 
    overflow: hidden; 
    margin: 0 3px; 
} 

.bars div{ 
    background: rgb(12,88,160); /* Old browsers */ 
    background: -moz-linear-gradient(top, rgba(12,88,160,1) 0%, rgba(10,52,91,1) 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(12,88,160,1)), color-stop(100%,rgba(10,52,91,1))); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, rgba(12,88,160,1) 0%,rgba(10,52,91,1) 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, rgba(12,88,160,1) 0%,rgba(10,52,91,1) 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, rgba(12,88,160,1) 0%,rgba(10,52,91,1) 100%); /* IE10+ */ 
    background: linear-gradient(top, rgba(12,88,160,1) 0%,rgba(10,52,91,1) 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0c58a0', endColorstr='#0a345b',GradientType=0); /* IE6-9 */ 
    float: left; 
    height: 100%; 
    width: 8px; 
    margin-right: 2px; 
} 

.bars div span { 
    background: #233243; 
    height: 0%; 
    width: 100%; 
    display: block; 
    position: relative; 
    top: 0; 
}

來源

2012-01-25 Xtian

只要給.bars DIV類「的立場：絕對的;」並將.bars div span CSS更改爲「position：relative; bottom：0px;」。

示例here。

<div class="bars"> 
     <div><span style="height:0%;"></span></div> 
     <div><span style="height:10%;"></span></div> 
     <div><span style="height:20%;"></span></div> 
     <div><span style="height:30%;"></span></div> 
     <div><span style="height:40%;"></span></div> 
     <div><span style="height:50%;"></span></div> 
     <div><span style="height:60%;"></span></div> 
     <div><span style="height:70%;"></span></div> 
     <div><span style="height:80%;"></span></div> 
     <div><span style="height:90%;"></span></div> 
     <div><span style="height:100%;"></span></div> 
     <div><span style="height:100%;"></span></div> 
     <div><span style="height:90%;"></span></div> 
     <div><span style="height:80%;"></span></div> 
     <div><span style="height:70%;"></span></div> 
     <div><span style="height:60%;"></span></div> 
     <div><span style="height:50%;"></span></div> 
     <div><span style="height:40%;"></span></div> 
     <div><span style="height:30%;"></span></div> 
     <div><span style="height:20%;"></span></div> 
     <div><span style="height:10%;"></span></div> 
     <div><span style="height:0%;"></span></div> 
    </div>

CSS：

.bars{ 
height: 100px; 
display: block; 
overflow: hidden; 
margin: 0 3px; 
vertical-align:bottom; 
} 

.bars div{ 
background: rgb(12,88,160); /* Old browsers */ 
background: -moz-linear-gradient(top, rgba(12,88,160,1) 0%, rgba(10,52,91,1) 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(12,88,160,1)), color-stop(100%,rgba(10,52,91,1))); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, rgba(12,88,160,1) 0%,rgba(10,52,91,1) 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, rgba(12,88,160,1) 0%,rgba(10,52,91,1) 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, rgba(12,88,160,1) 0%,rgba(10,52,91,1) 100%); /* IE10+ */ 
background: linear-gradient(top, rgba(12,88,160,1) 0%,rgba(10,52,91,1) 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0c58a0', endColorstr='#0a345b',GradientType=0); /* IE6-9 */ 
float: left; 
height: 100%; 
width: 8px; 
margin-right: 2px; 
position:relative 
} 

.bars div span { 
background: #233243; 
height: 0%; 
width: 100%; 
display: block; 
position: absolute; 
bottom: 0; 
}

來源

2012-01-25 19:43:58 Enqueuing

快速修復我能想到的是，而不是指定您的跨度高度，指定負頂部位置

<div class="bars"> 
     <div><span style="top:-0%;"></span></div> 
     <div><span style="top:-10%;"></span></div> 
     <div><span style="top:-20%;"></span></div> 
     <div><span style="top:-30%;"></span></div> 
     <div><span style="top:-40%;"></span></div> 
     <div><span style="top:-50%;"></span></div> 
     <div><span style="top:-60%;"></span></div> 
     <div><span style="top:-70%;"></span></div> 
     <div><span style="top:-80%;"></span></div> 
     <div><span style="top:-90%;"></span></div> 
     <div><span style="top:-100%;"></span></div> 
     <div><span style="top:-100%;"></span></div> 
     <div><span style="top:-90%;"></span></div> 
     <div><span style="top:-80%;"></span></div> 
     <div><span style="top:-70%;"></span></div> 
     <div><span style="top:-60%;"></span></div> 
     <div><span style="top:-50%;"></span></div> 
     <div><span style="top:-40%;"></span></div> 
     <div><span style="top:-30%;"></span></div> 
     <div><span style="top:-20%;"></span></div> 
     <div><span style="top:-10%;"></span></div> 
     <div><span style="top:-0%;"></span></div> 
    </div>

並將所有跨度的css高度設置爲100％。

.bars div span { 
    background: #233243; 
    height: 100%; 
    width: 100%; 
    display: block; 
    position: relative; 
    top: 0; 
}

結果可以看出here

來源

2012-01-25 19:38:05 Kypros

帶有CSS的條形圖，如何從底部到頂部填充，而不是從頂部到底部？

回答

相關問題