如何使浮動右元素垂直對齊其父div的底部？

換句話說，下面的HTML blurb在右上角有「小詞」，我希望它在右下角。如何使浮動右元素垂直對齊其父div的底部？

<html> 
    <body> 
    <div style="width: 500px; background-color: #cdcdcd"> 
     <div style="font-size: x-small; float: right">little words</div> 
     <div style="font-size: x-large">BIG WORDS</div> 
    </div> 
    </body> 
</html>

來源

2009-09-18 mike

不知道你是否可以做到這一點（大多數瀏覽器......）使用正確的浮動。

你可以用絕對定位試試吧：

<html> 
    <body> 
    <div style="width: 500px; background-color: #cdcdcd; position: relative;"> 
     <div style="font-size: x-small; postition: absolute; bottom: 0; right: 0">little words</div> 
     <div style="font-size: x-large">BIG WORDS</div> 
    </div> 
    </body> 
</html>

來源

2009-09-18 18:36:21 jeroen

如果你想花車，改變所有的div的順序，並應用clearfix類包含div。

<html> 
    <body>  
     <style type="text/css"> 
     .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } 
     .clearfix { display: inline-block; } 
     /* Opera hack */ 
     * html .clearfix { height:1%; } 
     .clearfix { display:block; } 
     </style> 
     <div style="width: 500px; background-color: #cdcdcd" class="clearfix"> 
     <div style="font-size: x-large">BIG WORDS</div> 
     <div style="font-size: x-small; float: right">little words</div> 
     </div> 
    </body> 
    </html>

來源

2009-09-18 18:40:01 hgmnz

使用行高。它設置爲「大詞」的雙重，你還可以設置一個邊距或填充頂部爲「小字」

結果：

alt text http://img84.imageshack.us/img84/1293/pantallazoi.png

<html> 
    <body> 
    <div style="width: 500px; background-color: #cdcdcd"> 
     <div style="font-size: x-small; float: right; line-height:400%;">little words</div> 
     <div style="font-size: x-large">BIG WORDS</div> 
    </div> 
    </body> 
</html>

來源

2009-09-20 23:40:02 Peter

如何使浮動右元素垂直對齊其父div的底部？

回答

相關問題