如何在父div中疊加多個子div？

我想表現出類似下面的圖像

我下面標記，但未能進度條...

<div class="container" style="position:relative;"> 
    <div class="progress-bar" style="position:absolute; width:75%; background:green;"></div> 
    <div class="value" style="position:absolut; left:0; margin:0 auto; color:yellow;">75%</div> => center of parent div 
</div>

我怎麼弄漂亮進度條？

請捐贈您的知識。

謝謝。

來源

2017-03-22 Shaffron

首先，你的代碼包含一個錯字。檢查類value的風格。如果你想在容器是一個圓角矩形，使用border-radius

<div class="container" style="position:relative; width:100px; background:#fff; height:20px; border: solid 1px #000"> 
 
    <div class="progress-bar" style="position:absolute; width:75%; height:20px; background:green;"></div> 
 
    <div class="value" style="position:absolute; left:0; margin:0 auto; color:yellow; text-align:center; width:100%;">75%</div> 
 
</div>

：也許這個代碼可以給你一些想法。

另外，將所有的css放入外部文件或<style>標記內可能是一個好主意。

來源

2017-03-22 07:50:26

謝謝你的建議！ – Shaffron

檢查這個link 引導進度條，他們匹配你以後。

您需要在您的項目中引導，有兩種方法可以獲得Bootstrap。你可以從這個link下載引導或使用該link

使用最新版本的引導（V3）的，您可以包含the documentation採取下面的代碼，讓你帶標籤的進度條包括來自CDN引導。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="progress"> 
 
     <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> 
 
     60% 
 
     </div> 
 
    </div>

所有的

來源

2017-03-22 07:34:14

我用過它。但就我而言，一些數值低於1％。我看不清價值 – Shaffron

你可以使用jquery或javascript添加十進制值 –

看看這個[問題]（http://stackoverflow.com/questions/29210218/showing-less-then-1-on-the -bootstrap-progress-bar），它可以幫助 –

如何在父div中疊加多個子div？

回答

相關問題