CSS Вертикальное выравнивание не работает с float

Как я могу использовать vertical-align, а также float в свойствах div? vertical-align отлично работает, если я не использую float. Но если я использую float, то это не сработает. Для меня важно использовать float:right для последнего div.

Я пытаюсь следовать, если вы удаляете float из всех div, тогда он будет работать нормально:

<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

Ответы

Ответ 1

Вам нужно установить высоту строки.

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

Ответ 3

Вертикальное выравнивание не работает с плавающими элементами. Это потому, что float поднимает элемент из нормального потока документа. Вы можете использовать другие методы вертикального выравнивания, такие как те, которые основаны на преобразовании, отображении: таблице, абсолютном позиционировании, высоте строки, js (возможно, последним) или даже простой старой таблице html (возможно, первый выбор, если содержимое фактически табличные). Вы обнаружите, что там горячие споры по этому вопросу.

Однако вы можете вертикально выровнять ВАШ 3 divs:

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

Не уверен, зачем вам нужна фиксированная ширина, отображение: встроенный блок и плавающий.