float：left和float：right在同一行上有不同大小的文字

Question

我有一個標題和一個導航菜單，需要在同一行分別左右對齊。

我的研究告訴我，這可以使用float: left和float: right與clear: both完成。這在文本大小相同時工作，但當標題的字體大小比導航菜單大時，導航菜單不會與該行的底部對齊，它會像這樣與頂部對齊：

_____  _____   ___ 
    | | | |  |         Link 1 Link 2 Link 3 
    | | | |  |___ 
    | | | |___ |___ 

我想實現的是：

_____  _____   ___ 
    | | | |  |  
    | | | |  |___ 
    | | | |___ |___         Link 1 Link 2 Link 3 

我做了一個小提琴here

我怎樣才能獲得導航菜單坐到線的底部？

Answer 1

你可以給他們平等的height秒，然後在div使用padding-top與鏈接 -

只要記得從height減去padding-top量保持相同的實際高度。

這裏是一個http://jsfiddle.net/gUFy8/1/的jsfiddle例如

，這裏是更新了自己的小提琴。增加了高度標題DIV和高度&填充到菜單DIV http://jsfiddle.net/Z3a6Z/3/

你需要玩的高度&填充得到一個完美的陣容量。

Answer 2

我已經修改了的jsfiddle並做出正確的事：http://jsfiddle.net/Z3a6Z/8/

下面是我在CSS的主要變化：

#menu 
{ 
    position: relative; 
    float: right; 
    height : 100px;  
    width: 160px; 
} 

#menu ul { 
    bottom: 0; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
    position: absolute; 
}