Wyrównanie w pionie CSS nie działa z wartością zmiennoprzecinkową

Jak mogę używać vertical-alignjak również floatwe divwłaściwościach? vertical-alignDziała dobrze, jeśli nie używać float. Ale jeśli używam pływaka, to nie działa. Ważne jest, aby użyć float:rightostatniego div.

Próbuję wykonać następujące czynności, jeśli usuniesz zmiennoprzecinkowe ze wszystkich elementów div, to będzie działać dobrze:

<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

Musisz ustawić wysokość linii.

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

Edytowano:

Właściwość CSS vertical-align określa pionowe wyrównanie elementu inline, inline-block lub table-cell.

Przeczytaj ten artykuł, aby dowiedzieć się, jak wyrównać w pionie

W rzeczywistości wyrównanie w pionie nie działa w przypadku elementów pływających. Dzieje się tak, ponieważ zmiennoprzecinkowy podnosi element z normalnego przepływu dokumentu. Możesz użyć innych technik wyrównywania w pionie, takich jak te oparte na transformacji, wyświetlaniu: tabeli, pozycjonowaniu bezwzględnym, wysokości linii, js (może w ostateczności) lub nawet zwykłej starej tabeli html (być może pierwszym wyborem, jeśli treść jest właściwie tabelaryczne). Przekonasz się, że toczy się gorąca debata na ten temat.

Jednak w ten sposób możesz wyrównać w pionie 3 elementy div:

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

Nie jestem pewien, dlaczego potrzebujesz zarówno stałej szerokości, wyświetlania: inline-block, jak i pływającego.