親divに複数の子divをオーバーレイする方法は？

Question

私はこの問題の原因をほとんど燃やします。

私は画像

progressbar

以下のようなプログレスバーを表示したい私は、私はかなりプログレスバーを取得する方法

<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> 

...以下のようなマークアップが、失敗??

あなたの知識を寄付してください。

ありがとうございました。

Answer 1

まず第一に、あなたのコードは、タイプミスが含まれています。クラスvalueのスタイルを確認してください。たぶん、このコードはあなたにいくつかのアイデアを与えることができます：

<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>

を使用すると、コンテナは、丸みを帯びた長方形でborder-radiusを使用したい場合。

また、すべてのCSSを外部ファイルまたは<style>タグ内に入れることをお勧めします。

Answer 2

これをチェックしてください。link ブートストラップの進行状況バーについては、後の内容と一致します。

あなたのプロジェクトにはブートストラップが必要です。ブートストラップを取得するには2通りの方法があります。あなたはこのlinkからブートストラップをダウンロードしたり、あなたはあなたのラベルの付いたプログレスバーを与えるthe documentationから取った次のコードを含めることができるブートストラップ（V3）の最新バージョンを使用して、このlink

を使用して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>