Genaue Angabe der prozentualen Breite im Verhältnis zum übergeordneten DIV in CSS

Question

Ich versuche, ein visuelles Element mit DIV-Elementen und CSS zu erstellen, das Daten in dem unten dargestellten Format anzeigen soll.

[-----50%-----|--25%--|--25%--]

Wenn ich den Code und das CSS verwende, das ich unten angegeben habe, läuft mein letztes Element immer auf die nächste Zeile über und die CSS-Prozentwerte, die ich angebe, scheinen das Layout nicht richtig zu erstellen.

Kann mir jemand einen besseren Weg vorschlagen, dies zu tun?

Mein HTML

<div class="visual-indicator-title">
All Items</div>
<div class="visual-indicator-holder">
<div class="vi-internal-element" style="width: 25%; background-color: #5E9BD1;">
    25%</div>
<div class="vi-internal-element" style="width: 25%; background-color: #AB884D;">
    25%</div>
<div class="vi-internal-element" style="width: 50%;">
    50%</div>
</div>
<div class="visual-legend">
<ul class="inline-block">
    <li>
        <div class="legend-blue">
        </div>
        Sales</li>
    <li><span class="legend-tan"></span>Processed</li>
    <li><span class="legend-grey"></span>Pending Processing</li>
</ul>

Mein CSS

.visual-indicator-title{
font-size:12px;
font-weight:bold;
color:#777777;
}
.visual-indicator-holder
{
width:100%;
background-color:#666666;
height:28px;
border-radius: 8px;
}
.visual-indicator-holder .vi-internal-element
{
font-size:11px;
text-align:center;
color:#ffffff;
background-color:#777777;
border-radius: 6px;
display:inline-block;
}

Answer 1

Der Grund dafür ist, dass bei inline o inline-block Weißer Raum im Element wirkt sich auf das Rendering aus (fügt Raum hinzu). Hier ist Ihre Demo arbeiten mit Leerzeichen entfernt, keine Änderungen an der CSS: http://jsfiddle.net/fZXnU/

Das Entfernen von Leerraum ist jedoch nicht trivial, so dass es besser wäre, die Elemente zu verschieben (was die display:block ). Arbeitsdemo mit viel Weißraum: http://jsfiddle.net/fZXnU/1/

Answer 2

Sie können verwenden float: left , position: relative und definieren Sie dann die Breite in Prozent, wie Sie es tun.

Ich habe Ihren Code geändert, um hier float zu verwenden: http://jsfiddle.net/Z3kdP/ .

Answer 3

Wenn Sie den Leerraum zwischen den div s, dann funktioniert es wie vorgesehen.

http://jsfiddle.net/TeJuU/

---

EDIT: Siehe diese Frage: Wie entfernt man den Abstand zwischen Inline-Block-Elementen?

Sie können font-size: 0 auf das übergeordnete Element, wenn Sie Ihr HTML nicht bearbeiten wollen.

http://jsfiddle.net/TeJuU/1/

Answer 4

Alle diese Elemente haben Rand und Füllung mit ihnen sowie die Prozentsätze schaffen Rundungsfehler bei der Berechnung. Sie müssen also sicherstellen, dass Sie festlegen oder berücksichtigen, was der Rand damit zu tun hat. Bei Rundungsfehlern ist es üblich, die Prozentsätze auf weniger als 100 % aufzurunden und dann margin: auto hinzuzufügen, um das Ganze zu zentrieren.