CSS Dikey hizalama float ile çalışmıyor

Nasıl kullanabilir vertical-alignyanı sıra floatiçinde divözelliklerinde? Kullanmazsam vertical-alignişler iyi gidiyor float. Ama şamandırayı kullanırsam işe yaramaz. float:rightSon div için kullanmak benim için önemli .

Aşağıdakini deniyorum, şamandırayı tüm div'lerden kaldırırsanız, o zaman iyi çalışır:

<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

Satır yüksekliğini ayarlamanız gerekir.

<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/

Düzenlendi:

Dikey hizalama CSS özelliği bir satır içi, satır içi blok veya masa-hücresi elemanının dikey hizalanmasını belirler.

Dikey hizalamayı anlamak için bu makaleyi okuyun

Dikey hizalama gerçekten de kayan öğelerle çalışmaz. Bunun nedeni şamandıranın, öğeyi belgenin normal akışından kaldırmasıdır. Dönüştürme, görüntülemeye dayalı olanlar gibi diğer dikey hizalama tekniklerini kullanmak isteyebilirsiniz: tablo, mutlak konumlandırma, satır yüksekliği, js (belki son çare) veya hatta düz eski html tablosu (içerik ise belki ilk seçenek aslında tablo). Bu konuda hararetli bir tartışma olduğunu göreceksiniz.

Ancak, SİZİN 3 div'lerinizi dikey olarak şu şekilde hizalayabilirsiniz:

.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; 
}

Neden hem sabit genişliğe, ekrana ihtiyaç duyduğunuzdan emin değilim: satır içi blok ve kayan.