Geschwister Spannweite Verwirrung bekommen Prozentsatz der vorhergehenden Geschwister

Question

Ich versuche eine sehr einfache Projekt Artikel-Liste/Fortschrittsanzeige (nicht interaktiv, nur eine statische Anzeige), die verschiedene Kategorien als Fortschrittsboxen überlagert anzeigen möchte, wie folgt:

.plan { 
 
    list-style: none; 
 
} 
 

 
.plan li { 
 
    display: block; 
 
} 
 

 

 
.progress a { 
 
    text-decoration: none; 
 
} 
 

 
.plan .subject { 
 

 
} 
 

 

 
.plan .progress { 
 
    background-color: #eee; 
 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset; 
 
    border-radius: 8px; 
 
    margin-bottom: 1ex; 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 

 
.progress span { 
 
    height: 100%; 
 
    border-radius: 8px 0 0 8px; 
 
    display: inline-block; 
 
} 
 

 
.progress a { 
 
    padding: 2px 1ex; 
 
    display: inline-block; 
 
} 
 

 
.progress .done { 
 
    background-color: lightgreen; 
 
} 
 

 
.progress .critical { 
 
    background-color: crimson; 
 
} 
 

 

 
.progress .todo { 
 
    background-color: cyan; 
 
}

<ul class="plan"> 
 
    <li> 
 
     <div class="progress"> 
 
      <span class="done" style="width: 55%"/> 
 
      <span class="todo" style="width: 35%"/> 
 
      <span class="critical" style="width: 25%"/> 
 
      <a href=".">1234567</a> 
 
     </div> 
 
     <span class="subject"> lorem ipsum dolor sit amet </span> 
 
    </li> 
 

 
    <li> 
 
     <div class="progress"> 
 
      <span class="done" style="width: 80%"/> 
 
      <span class="todo" style="width: 50%"/> 
 
      <a href=".">89</a> 
 
     </div> 
 
     <span class="subject"> phasellus elit orci, suscipit et eros eu, consequat viverra sem. </span> 
 
    </li> 
 
</ul>

In dem obigen Beispiel ist meine Absicht Breite der verschachtelten Elemente der spandiv.progress, zum einstellen der Prozentsatz der div.progress Kastengröße selbst zu sein. Wie jedoch in der Ausgabe zu sehen ist, setzen sukzessive span s ihre Breite auf den Prozentsatz ihrer vorhergehenden Geschwister. Zum Beispiel im ersten Artikel ist die 55% die der ID-Box, wie vorgesehen. Das folgende 35% ist das der 55%, das ist .55*.35 = 19.25% der ID-Box), und die dritte 25% Breite ist .1925*.25=~5% der ID-Box.

Wie kann ich die Geschwisterspanne als den Prozentsatz des Elternteils div bekommen?

Alternative Layout Vorschläge würden sehr geschätzt werden. Das Ziel ist hier, einzelne Unterkategorien (z. B. critical, todo, done) als Prozentsatz einer Gesamtsumme anzuzeigen, deren Größe auf dem Element basiert, das sie überlagern (hier das Element <a> mit der Element-ID). Zum Beispiel könnten sie als einzelne Boxen dimensioniert werden, die als 25%, 10% und 20% und Rest 45% (grau) als Standard, jeweils für den ersten Artikel, ausgerichtet sind.

Answer 1

Ich hoffe ich Ihre Frage richtig verstanden habe ...

Ich würde das HTML ändern. Un-Nest die span-Tags, schließen Sie sie richtig und wickeln Sie sie in einem div, die Ihnen erlauben, sie leichter zu positionieren:

<li> 
    <div class="progress"> 
     <div class="prog-bars"> 
     <span class="done"></span> 
     <span class="todo"></span> 
     <span class="critical"></span> 
     </div> 
     <a href="#">1234567</a> 
    </div> 
    <span class="subject"> lorem ipsum dolor sit amet </span> 
    </li> 

Dann müssen Sie ein paar Änderungen an der CSS machen.

Erstens geben .progress eine Position:

.plan .progress { 
    position: relative; 
} 

Jetzt können Sie die neue Klasse Stil, .prog-bars

.prog-bars { 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    height: 100%; 
    width: 100%; 
    text-align: left; 
    font-size: 0; /*this removes white space between spans */ 
} 

Dadurch wird das div direkt über den Fortschritt div. Jetzt können Sie die Spannen stylen. (Beachten Sie, dass Sie den border-radius Ziel können genauer auch):

.prog-bars .done { 
    background-color: lightgreen; 
    width: 55%; 
    border-radius: 8px 0 0 8px; 
} 

.progress .todo { 
    background-color: cyan; 
    width: 35%; 
} 

.progress .critical { 
    background-color: crimson; 
    width: 5%; 
    border-radius: 8px 8px 0 0; 
} 

Jetzt Ihr Linktext verschwunden sein wird. Sie müssen ihm einen Z-Index geben, damit er über die Spannen angezeigt wird. Sie müssen auch eine Position für z-index geben, richtig zu arbeiten (ich bin nicht sicher, warum ..)

.progress a { 
     z-index: 444; 
     position: relative; 
    } 

View Codepen

EDIT: Assign width:auto-.progress, die Link-Text in verschiedenen Größen aufnehmen.

.plan { 
 
    list-style: none; 
 
} 
 

 
.plan li { 
 
    display: block; 
 
} 
 

 
.progress a { 
 
    text-decoration: none; 
 
    font-family: sans-serif; 
 
    font-size: 20px; 
 
    z-index: 444; 
 
    position: relative; 
 
    padding: 2px; 
 
    display: inline-block; 
 
    color: #000; 
 
} 
 

 
.plan .progress { 
 
    background-color: #eee; 
 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset; 
 
    border-radius: 8px; 
 
    margin-bottom: 1ex; 
 
    position: relative; 
 
    display: inline-block; 
 
    width: 100px; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
} 
 

 
.prog-bars { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    text-align: left; 
 
    font-size: 0; 
 
} 
 

 
.progress span { 
 
    height: 100%; 
 
    display: inline-block; 
 
} 
 

 
.prog-bars .done { 
 
    background-color: lightgreen; 
 
    width: 45%; 
 
    border-radius: 8px 0 0 8px; 
 
} 
 

 
.progress .todo { 
 
    background-color: cyan; 
 
    width: 25%; 
 
} 
 

 
.progress .critical { 
 
    background-color: crimson; 
 
    width: 10%; 
 
    border-radius: 8px 8px 0 0; 
 
}

<ul class="plan"> 
 
    <li> 
 
    <div class="progress"> 
 
     <div class="prog-bars"> 
 
     <span class="done"></span> 
 
     <span class="todo"></span> 
 
     <span class="critical"></span> 
 
     </div> 
 

 
     <a href="#">1234567</a> 
 

 
    </div> 
 
    <span class="subject"> lorem ipsum dolor sit amet </span> 
 
    </li> 
 

 
    <li> 
 
    <div class="progress"> 
 
     <div class="prog-bars"> 
 

 
     <span class="done"></span> 
 
     <span class="todo"></span> 
 
     </div> 
 
     <a href="#">89</a> 
 
    </div> 
 
    <span class="subject"> phasellus elit orci, suscipit et eros eu, consequat viverra sem. </span> 
 
    </li> 
 
</ul>