どのようにして使用することができるvertical-align
だけでなく、float
内div
のプロパティ?をvertical-align
使用しない場合は正常に動作しfloat
ます。しかし、フロートを使用すると、機能しません。float:right
最後のdivにを使用することが重要です。
私は以下を試しています、すべてのdivからfloatを削除すると、正常に機能します:
<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
}
line-height
すべての要素に同じ値を設定した場合、vertical-align
は役に立ちません。(jsfiddle.net/VBR5J/448)