Wie mehrere Kinder divs in Eltern div überlagern?

Question

Ich bin fast wegen dieses Problems ausgebrannt.

Ich möchte wie Fortschrittsbalken unten zeigen Bild

progressbar

I wie unten markieren aber nicht ...

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

, wie ich ziemlich Fortschrittsbalken bekommen ??

Bitte spenden Sie Ihr Wissen.

danke.

Answer 1

Zunächst einmal enthält der Code einen Tippfehler. Überprüfen Sie den Stil für die Klasse value. Vielleicht kann dieser Code Ihnen ein paar Ideen:

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

Wenn Sie die Behälter wollen ein abgerundetes Rechteck sein, verwenden border-radius.

Auch ist es wahrscheinlich eine gute Idee, alle css in eine externe Datei oder innerhalb eines <style> Tags zu setzen.

Answer 2

Überprüfen Sie diese link für Bootstrap Fortschrittsbalken sie entsprechen, was Sie wollen.

Sie benötigen Bootstrap in Ihrem Projekt, gibt es zwei Möglichkeiten, Bootstrap zu erhalten. Sie können Bootstrap von diesem link herunterladen oder schließen Bootstrap von einem CDN dieses link

Mit der neuesten Version von Bootstrap mit (v3) können Sie den folgenden Code aus the documentation genommen sind, die Sie einen Fortschrittsbalken mit einem Etikett gibt.

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