CSS進度條不合適，如何保持它？

Question

我有四個進度條。他們應該留在灰色地帶的容器內。而是在頁腳下方，如下面的圖像屏幕截圖所示。

酒吧的代碼是這樣製作的，以便我可以將它們放在四周，而且它不僅僅粘在一個區域。

這是code to the progress bars：

HTML：

<section class="container"> 
    <section class="wrapper"> 
     <div class="meter"> <span style="width: 90%"></span> 

     </div> 
     <div class="meter"> <span style="width: 70%"></span> 

     </div> 
     <div class="meter"> <span style="width: 50%"></span> 

     </div> 
     <div class="meter"> <span style="width: 90%"></span> 

     </div> 
    </section> 
</section> 

CSS：

.container { 
    position: relative; 
} 

.wrapper { 
    position: absolute; 
    right: 0; 
    top: 90px; 
} 

.meter { 
    height: 15px; 
    /* Can be anything */ 
    margin-bottom: 10px; 
    background: #555; 
    -moz-border-radius: 25px; 
    -webkit-border-radius: 25px; 
    border-radius: 25px; 
    width: 210px; 
    padding: 0px; 
    -webkit-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3); 
    -moz-box-shadow : inset 0 -1px 1px rgba(255, 255, 255, 0.3); 
    box-shadow : inset 0 -1px 1px rgba(255, 255, 255, 0.3); 
} 
.meter > span { 
    display: block; 
    height: 100%; 
    -webkit-border-top-right-radius: 8px; 
    -webkit-border-bottom-right-radius: 8px; 
    -moz-border-radius-topright: 8px; 
    -moz-border-radius-bottomright: 8px; 
    border-top-right-radius: 8px; 
    border-bottom-right-radius: 8px; 
    -webkit-border-top-left-radius: 20px; 
    -webkit-border-bottom-left-radius: 20px; 
    -moz-border-radius-topleft: 20px; 
    -moz-border-radius-bottomleft: 20px; 
    border-top-left-radius: 20px; 
    border-bottom-left-radius: 20px; 
    background-color: rgb(43, 194, 83); 
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(43, 194, 83)), color-stop(1, rgb(84, 240, 84))); 
    background-image: -webkit-linear-gradient(center bottom, rgb(43, 194, 83) 67%, rgb(84, 240, 84) 69%); 
    background-image: -moz-linear-gradient(center bottom, rgb(43, 194, 83) 37%, rgb(84, 240, 84) 69%); 
    background-image: -ms-linear-gradient(center bottom, rgb(43, 194, 83) 37%, rgb(84, 240, 84) 69%); 
    background-image: -o-linear-gradient(center bottom, rgb(43, 194, 83) 37%, rgb(84, 240, 84) 69%); 
    -webkit-box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4); 
    -moz-box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4); 
    position: relative; 
    overflow: hidden; 
} 

Answer 1

您有正確的想法。然而，你正在將你的包裝放置在相對於空的section.container的位置。 section.container沒有設置寬度和高度，因此您不會將元素放到您認爲應該放在的位置。

簡單地給你的容器一個你選擇的min-height，你可以在它的邊界內移動它。

<section class="container" style="min-height: 300px;"> 
    <section class="wrapper"> 
    <div class="meter"> <span style="width: 90%"></span> 
    </div> 
     ... 
    </section> 
</section> 

我也會把你的網頁的內容放到你的section.container（這裏是p標籤）。然後，您可以將頁面上的任意位置移動。

position: absolute可讓您指定座標（頂部，底部，左側）在position: relative之間移動。如果那個相對的東西沒有寬度（或者寬度小於你定位的元素的寬度，那麼你肯定會在事情之下得到頁腳等等。）

Answer 2

添加這些新的CSS和看到了什麼？

.wrapper { 
    position:relative; 
    top:20px; 
    left:100px; 
    padding: 
} 
.container { 
    position:relative; 
    float:left; 
    top:0; 
    left:0; 
    width:100%; 
    height:auto; 
} 
#footer{ 
    position:absolute;  
    left:0; 
    bottom:0; 
}