3 Inline-Block divs mit genau 33% Breite passt nicht in Eltern

Question

Dies ist ein häufiges Problem, aber ich kann nicht herausfinden, warum es passiert.

Ich habe ein Elternteil div und innerhalb dieses div Ich habe 3 divs mit Breite auf 33% (genau, nicht 33,3%!) Und display: inline-block.

In Chrome funktioniert es gut, aber in Mozilla und Opera nicht (ich habe es noch nicht im IE getestet). Ich dachte, das Problem könnte in dem Algorithmus liegen, den Browser verwenden, um die Pixelgröße aus Prozentsätzen zu berechnen. Aber als ich die DOM-Metriken überprüfte, fand ich, dass die Breite des Elternteils 864px und die des Kindes 285px ist (das ist richtig: 864 * .33 = 285.12). Aber warum passt es nicht in die Eltern? 285 * 3 = 855, das ist 9px weniger als die Elternbreite!

Ach ja, Padding, Rand und Rahmen für alle divs auf 0 und DOM-Metriken bestätigen dies.

Answer 1

Leerzeichen in dem HTML-Quellcode

In dem HTML-Quellcode, wenn Sie Textzeilen oder Bilder haben, oder Elemente, die inline-block sind, wenn es irgendwelche Leerzeichen zwischen ihnen (Leerzeichen, Tabulatoren sind, oder neue Zeilen), wird ein einzelnes Leerzeichen zwischen ihnen hinzugefügt, wenn die Seite gerendert wird. Zum Beispiel in der folgenden HTML, wird ein Leerzeichen zwischen jedem der vier Teilen des Inhalts erscheinen:

one 
two 
<img src="three.png"/> 
<span style="display: inline-block;">four<span> 

Dies ist sehr hilfreich für die Textzeilen, und für kleine Bilder oder HTML-Elemente, die in einer Zeile angezeigt werden von Text. Aber es wird ein Problem, wenn inline-block für Layout-Zwecke verwendet wird, anstatt als Möglichkeit, Inhalt in einem Textabschnitt hinzuzufügen.

den zusätzlichen Platzes Entfernen

Der sicherste, Cross-Browser-Weg, um die zusätzliche 4px oder so von Raum zu vermeiden, die zwischen inline-block Elementen hinzugefügt wird, ist jede Leerzeichen in dem HTML-Quellcode zwischen den HTML-Tags zu entfernen .

Zum Beispiel, wenn Sie ein ul mit 3 schwebte li tags:

<-- No space, tabs, or line breaks between </li> and <li> --> 
<ul> 
    <li>...</li><li>...</li><li>...</li> 
</ul> 

Leider ist dies schadet der Wartbarkeit der Website. Abgesehen davon, dass der Code unlesbar gemacht wird, beeinträchtigt er die Trennung von Daten und Formatierung.

Wenn ein anderer Programmierer später kommt und beschließt, jedes li Tag in eine separate Zeile im Quellcode zu setzen (nicht bewusst, warum die Tags in der gleichen Zeile waren oder möglicherweise durch HTML Tidy und nicht einmal eine Chance) (HTML-Kommentare), plötzlich hat die Website einen Formatierungsfehler, der möglicherweise schwer zu identifizieren ist.

Betrachten Schwimmelemente anstelle

Das Leerzeichen Verhalten legt nahe, dass es unangemessen sein kann inline-block für allgemeines Layout Zwecke zu verwenden, um es für etwas anderes als Inhalt innerhalb des Strömungs eines Absatzes von Text hinzufügen .

Plus, in einigen Fällen inline-block Inhalt ist sehr schwierig, vollständig zu stylen und auszurichten, vor allem auf älteren Browsern.

Kurze Zusammenfassung von anderen Lösungen

1. Setzen Sie die enge Tag auf der gleichen Linie wie die nächsten offenen Tag, ohne Leerzeichen zwischen ihnen.
2. Verwenden Sie HTML-Kommentare, um alle Leerzeichen zwischen dem geschlossenen Tag und dem nächsten offenen Tag zu füllen (wie von @Arbel vorgeschlagen).
3. Fügen Sie jedem Element einen negativen linken Rand hinzu (normalerweise -3px oder -4px, basierend auf der Schriftgröße). Ich empfehle diesen besonderen Ansatz nicht.
4. Setzen Sie font-size für das Containerelement auf 0 oder 0.01em. Dies funktioniert nicht in Safari 5 (nicht sicher über spätere Versionen), und es kann Responsive Design Websites stören, oder jede Website, die eine font-size Einheit außer px verwendet.
5. Entfernen Sie leere Textknoten aus dem Container mithilfe von JavaScript oder jQuery. Dies funktioniert nicht in IE8 und früheren Versionen, da Textknoten in diesen Browsern nicht erstellt werden, wenn zwischen den Elementen nur Leerzeichen vorhanden sind, obwohl zwischen den Elementen noch Leerzeichen eingefügt werden.
6. Set letter-spacing und word-spacing für den Container (wie @PhillipWills vorgeschlagen). Further info. Dies erfordert die Standardisierung em Größen auf der Website, die möglicherweise keine sinnvolle Option für alle Websites sein.
7. Fügen Sie text-space-collapse: discard; dem Container hinzu (zuvor genannt). Leider wird this CSS3 style von keinem Browser unterstützt und der Standard wurde nicht vollständig definiert.

Answer 2

Zwischen den inneren divs wird ein Leerzeichen eingefügt. Es gibt einige CSS voodoo, dieses Problem zu beheben:

div { 
    letter-spacing: -.31em; 
    word-spacing: -.43em; 
} 
div div { 
    letter-spacing: normal; 
    word-spacing: normal; 
} 

Natürlich, werden Sie wahrscheinlich lieben Klassen oder etwas verwenden, zwischen Eltern und Kindern zu unterscheiden.

Answer 3

float:left;

.parent{ 
    width: 100% 
} 
.child{ 
    float:left; 
    display: inline-block; 
    width: 33% 

} 

http://jsfiddle.net/H6Whc/1/

Answer 4

hinzufügen Wenn Sie den HTML wollen nicht vermasseln Formatierung z.B. Da alle Elemente mit inline-block für zukünftige Lesbarkeit in einer Zeile geschrieben sind und auch der zusätzliche Leerraum, der zwischen ihnen hinzugefügt wird, entfernt wird, können Sie den Leerraum "kommentieren".

Zum Beispiel in Ihrem Code das Problem lösen, wird es sogar mit 33,3% anstelle von 33% arbeiten:

.parent { 
    width: 100%; 
} 
.child{ 
    display: inline-block; 
    width: 33.3%; 
} 

/\

<div class="parent"> 
     <div class="child">bla-bla1</div><!-- 
    --><div class="child">bla-bla2</div><!-- 
    --><div class="child">bla-bla3</div> 
</div> 

Answer 5

Dies ist eine von mehreren erwähnt wird von Kommentaren und von @Avin, aber das Entfernen display: inline-block und Ersetzen von float: left funktioniert.

.parent{ 
    width: 100% 
} 
.child{ 
    float:left; 
    width: 33% 
} 

Answer 6

Hat jemand versucht Display: Tabelle? Wenn das keine gute Idee ist, warum nicht? Dies funktioniert in allen modernen Browsern und ich habe es auf IE9 getestet.

.parent{ 
    display: table; 
    width: 100%; 
} 
.containers { 
    box-sizing: border-box; 
    border: 1px solid #000; 
    height: 50px; 
    width: 33.3%; 
    display: table-cell; 
} 

Answer 7

Dies ist ein häufiges Problem, aber es kann durch die Zuordnung der display: table CSS-Eigenschaft auf das übergeordnete div sehr leicht aussortiert werden.