float：left和float：在具有不同大小文本的同一行上

Question

我有一个标题和一个导航菜单，需要分别在同一行左右对齐。

我的研究告诉我，可以使用float: left和float: right clear: both来完成此操作。当文本大小相同时，这确实有效，但当标题的字体大小比导航菜单大时，导航菜单不会与行的底部对齐，它与顶部对齐如下：

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

我想要实现的目标是：

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

我做了一个小提琴here

如何让导航菜单位于线的底部？

Answer 1

我修改了你的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;
}

Answer 2

你可以给他们平等height s然后使用padding-top上的div链接 -

请记住从padding-top中减去height的数量，以保持相同的实际高度。

这是一个http://jsfiddle.net/gUFy8/1/ JSFiddle示例

这是对小提琴的更新。增加标题div的高度，高度和＆amp;填充到菜单div http://jsfiddle.net/Z3a6Z/3/

你需要玩弄高度和高度。填充以获得完美的阵容。