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; 
}