Warum werden "display: inline-block" -Elemente beim Umbrechen von Text 100% breit?

Ich habe eine portfolioähnliche Seite, die Bilder in einem Raster mit einem Titel darüber anzeigt. Der Titel wird auf Inline-Block festgelegt und hat eine Hintergrundfarbe, die Breite hängt von der Länge des Titels ab. Wenn ein Titel zu lang wird, um in den übergeordneten Artikel zu passen, wird er in eine zweite Zeile umgebrochen. kein Problem. Aber warum ergibt die automatische Breite jetzt 100%?Warum werden "display: inline-block" -Elemente beim Umbrechen von Text 100% breit?

.content{ 
    background: pink; 
    width: 33%; 
    float: left; 
    height: 200px; 
    overflow: hidden; 
    position: relative; 
} 

.title{ 

    position: absolute; 
    bottom: 10%; 
    left: 0; 
    text-align: center; 
} 
h2{ 
    display: inline-block; 
    font-family: Arial; 
    background: rgba(255,255,255,0.6); 

}

Beispiel: https://jsfiddle.net/6qtw7duf/

Quelle

2016-08-09 Koen Verbruggen

Welche Browser oder Gerät Sie dieses Verhalten zu sehen, in? Die von dir zur Verfügung gestellte Geige rendert jeden der drei Beispieltexte mit der neuesten Version von Chrome und Safari zu 33%. – Xorandnotor

@Xorandnotor es ist 100% der 33% – Neal

ich kann 33% für jeden Container sehen ... –

Ok..let die erklären dies in einfachen Begriff

Quelle

2016-08-09 15:03:24 repzero

In der Tat erbt es vom Elternelternteil. Aber warum hat die dritte Spalte dieses Verhalten, und die ersten beiden nicht? Um genauer zu sein: Ich würde annehmen, dass die Breite der mehrzeiligen H2 so groß wird wie ihre größte Textzeile, nur beim Rendern der einzeiligen H2. Die einzeiligen H2's sind wegen Inline-Block nicht 100% Breite des Elternteils. Editiert die Geige mit Grenzen, um klarer zu sein und die Breite des H2-Containers auf 100% zu bringen; Das macht die H2's schön zentriert und so groß wie ihr Inhalt. ERWARTEN Sie für die Multilinie H2's, die 100% der Eltern werden? –

Inline-Block-Elemente werden umgebrochen, wenn ihr Inhalt ihren übergeordneten Container überschreitet..das ist natürlich, wenn Sie keine CSS-Regel angeben, die dieses Standardverhalten überschreiben kann ... zum Beispiel die CSS-Regel "overflow: visible; width : .... "wird ein Überschreiben dieses Standard-HTML-Spezifikationsverhaltens auslösen ... jede Sprache hat Standards, die wir in Frage stellen. Also, in aller Kürze akzeptieren wir sie ... – repzero

Natürlich müssen wir akzeptieren. Ich versuche nur, das Verhalten zu verstehen. ..... tatsächlich scheint das Beispiel nun so zu funktionieren, wie ich es erwartet hatte. ?!?! :) Hat nach allem, wie ich es wollte. Danke für das Nachdenken mit mir hier. –

Warum werden "display: inline-block" -Elemente beim Umbrechen von Text 100% breit?

Antwort

Verwandte Themen