我如何使用vertical-align,以及float在div性能?的vertical- align,如果我不使用工作正常float。但是,如果我使用浮点数,那么它将不起作用。对我来说float:right,在最后一个div中使用至关重要。
vertical-align
float
div
vertical- align
float:right
我正在尝试遵循,如果您从所有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>