CSS Vertical Align funktioniert nicht mit Float

Wie kann ich die vertical-alignsowie floatin den divEigenschaften verwenden? Das vertical-alignfunktioniert gut, wenn ich das nicht benutze float. Aber wenn ich den Schwimmer benutze, funktioniert er nicht. Es ist wichtig für mich, das float:rightfür die letzte Div zu verwenden.

Ich versuche zu folgen, wenn Sie den Schwimmer von allen Divs entfernen, dann würde es gut funktionieren:

<div class="wrap">
    <div class="left">First div, float left,  has more text.</div>
    <div class="left2">Second div, float left </div>
    <div class="right">Third div, float right</div>
</div>

CSS:

.wrap{
    width: 500px;
    overflow:hidden;    
    background: pink;
}

.left {
    width: 150px;       
    margin-right: 10px;
    background: yellow;  
    float:left;
    vertical-align: middle;  
    display:inline-block

}

.left2 {
    width: 150px;    
    margin-right: 10px;
    background: aqua;
    float:left;
    vertical-align: middle;   
    display:inline-block
}

.right{
    width: 150px;
    background: orange;
    float:right;
    vertical-align: middle;
    display:inline-block
}

JSFiddle

Sie müssen die Zeilenhöhe einstellen.

<div style="border: 1px solid red;">
<span style="font-size: 38px; vertical-align:middle; float:left; line-height: 38px">Hejsan</span>
<span style="font-size: 13px; vertical-align:middle; float:right; line-height: 38px">svejsan</span>
<div style="clear: both;"></div>

http://jsfiddle.net/VBR5J/

Bearbeitet:

Die CSS-Eigenschaft " Vertikal ausrichten" gibt die vertikale Ausrichtung eines Inline-, Inline-Block- oder Tabellenzellenelements an.

Lesen Sie diesen Artikel zum Verständnis der vertikalen Ausrichtung

Die vertikale Ausrichtung funktioniert in der Tat nicht mit schwebenden Elementen. Dies liegt daran, dass float das Element aus dem normalen Fluss des Dokuments hebt. Möglicherweise möchten Sie andere vertikale Ausrichtungstechniken verwenden, z. B. solche, die auf Transformation, Anzeige: Tabelle, absolute Positionierung, Zeilenhöhe, js (letzter Ausweg vielleicht) oder sogar der einfachen alten HTML-Tabelle (möglicherweise die erste Wahl, wenn der Inhalt ist) basieren eigentlich tabellarisch). Sie werden feststellen, dass es zu diesem Thema eine hitzige Debatte gibt.

Auf diese Weise können Sie jedoch IHRE 3 Divs vertikal ausrichten:

.wrap{
    width: 500px;
    overflow:hidden;    
    background: pink;
}

.left {
    width: 150px;       
    margin-right: 10px;
    background: yellow;  
    display:inline-block;
    vertical-align: middle; 
}

.left2 {
    width: 150px;    
    margin-right: 10px;
    background: aqua; 
    display:inline-block;
    vertical-align: middle; 
}

.right{
    width: 150px;
    background: orange;
    display:inline-block;
    vertical-align: middle; 
}

Ich bin mir nicht sicher, warum Sie sowohl feste Breite als auch Anzeige benötigen: Inline-Block und Floating.