Warum hat diese inline-block-element einen Inhalt besitzen, der nicht vertikal ausgerichtet

Kam in einem komischen CSS Problem. Kann mir jemand erklären, warum die box mit Inhalt ist nicht vertikal ausgerichtet?

Wenn Sie text in den span mit der Klasse .divPutTextToFixIssue - es richtet richtig.

http://jsfiddle.net/KgqJS/88/

<div id="divBottomHeader">
    <div class="divAccountPicker">
       <span class="divPutTextToFixIssue"><span>                 
    </div>
    <div class="divAccountData">
        <span>Balance: $555</span>
    </div>
</div>​
#divBottomHeader {
    background-color: #d5dbe0;
    height: 43px;
}
.divAccountPicker {
    display: inline-block;
    background: blue;            
    width: 200px;
    height: 40px;
}
.divAccountData {
    display: inline-block;
    background: red;
    width: 400px;
    height: 40px;
}​

InformationsquelleAutor Anton Skovorodko | 2012-10-18

  1. 41

    Den Standard - vertical-align Wert ist baseline die

    Richtet die Grundlinie der box an der Grundlinie der übergeordneten box

    Hinweis: Sie können diesen Standardwert in Aktion hinzufügen vertical-align:baseline zu Ihrem .divAccountData - Selektor. Da baseline ist die Standard-Ausrichtung ist unverändert.

    Müssen Sie ändern, um es zu top zum ausrichten der Blöcke an der Spitze, zum Beispiel:

    .divAccountData {
    display: inline-block;
    background: red;
    width: 400px;
    height: 40px;
    vertical-align: top;
}

    Baseline ist definiert als

    die Linie, auf der die meisten Buchstaben "sitzen" und unterhalb der Unterlängen erweitern

    Adresse warum hinzufügen von text scheint das problem zu beheben, es ist, weil

    Grundlinie der 'inline-block' ist die baseline der letzten Zeile Feld in den normalen Ablauf, es sei denn, es hat entweder keine in-flow line Boxen oder wenn deren 'overflow' - Eigenschaft einen berechneten Wert als 'visible', in welchem Fall die baseline ist der untere Rand im Rand.

    vom CSS2 Visual formatting model details

    So, indem nur ein einziges Zeichen ändert die Grundlinie, wodurch der zweite block erscheinen auf der gleichen vertikalen Ausrichtung. Diese nur funktioniert, wenn beide Blöcke enthalten die gleiche Anzahl von Zeilen. Versuchen Sie, mehr Wörter zu einem Ihrer Blöcke und Sie werden sehen, dass ohne dass vertical-align:top auf dem zweiten block wird es verschieben, je nachdem, wie viele Zeilen text bestehen, in den ersten block.

    Edit: Gefunden, stellt sich die Frage, Warum ist das inline-block-element nach unten geschoben?

    InformationsquelleAutor andyb

  2. 1

    Müssen Sie vertical-align: top; zu .divAccountPicker demo

    InformationsquelleAutor xception

  3. 0

    ...............................
    Hi fügen Sie nun vertical-align:top in Ihrem .divAccountData, .divAccountPicker Klasse
    wie diese 

    .divAccountData, .divAccountPicker {
    vertical-align: top;
}

    LIve-demo

    wenn Sie display:inline-block; als all-ways vertical-align:top

    InformationsquelleAutor Rohit Azad

  4. -1

    versuchen, diese

    .divPutTextToFixIssue {
   display:inline-block;
 }

    jsFiddle

    InformationsquelleAutor Afshin

Schreibe einen Kommentar