CSS垂直alignment不适用于浮动

我怎样才能使用vertical-align以及float div属性? vertical-align工作正常,如果我不使用float 。 但是,如果我使用浮动,那么它不起作用。 对我来说最重要的是使用float:right来表示最后一个div。

我想下面,如果你从所有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

你需要设置行高。

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

编辑:

vertical-align CSS属性指定内联,内联块或表格元素的垂直alignment。

阅读这篇文章了解垂直alignment

实际上,垂直alignment不适用于浮动元素。 这是因为浮动将元素从正常的文档stream中提起。 您可能想要使用其他垂直alignment技术,如基于变换,显示:表,绝对定位,行高,js(最后的手段也许),甚至普通的旧的HTML表(也许是第一个select,如果内容是实际上是表格)。 你会发现在这个问题上有一个激烈的辩论。

不过,这是你如何垂直alignment你的3个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; } 

不知道为什么你需要固定的宽度,显示:内联块和浮动。