CSS Vertical align ne fonctionne pas avec float

Comment puis-je utiliser l’ vertical-align ainsi que le float dans les propriétés div ? L’ vertical-align fonctionne bien si je n’utilise pas le float . Mais si j’utilise le flottant, cela ne fonctionne pas. Il est important pour moi d’utiliser le float:right pour le dernier div.

J’essaie de suivre, si vous retirez le flottant de toutes les div, alors ça fonctionnerait bien:

 
First div, float left, has more text.
Second div, float left
Third div, float right

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

Vous devez définir la hauteur de ligne.

 
Hejsan svejsan

http://jsfiddle.net/VBR5J/

Édité:

La propriété CSS vertical-align spécifie l’alignement vertical d’un élément inline, inline-block ou table-cell.

Lisez cet article pour comprendre l’alignement vertical

L’alignement vertical ne fonctionne pas avec les éléments flottants, en effet. C’est parce que float soulève l’élément du stream normal du document. Vous voudrez peut-être utiliser d’autres techniques d’alignement vertical, comme celles basées sur la transformation, l’affichage: table, positionnement absolu, hauteur de ligne, js (dernier recours, peut-être) ou même l’ancien tableau html (peut-être le premier choix si le contenu est réellement tabulaire). Vous constaterez qu’il y a un débat houleux sur cette question.

Cependant, voici comment aligner verticalement vos 3 divisions:

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

Vous ne savez pas pourquoi vous avez besoin des deux largeur fixe, affichage: bloc en ligne et flottant.