将导航对齐到标题的底部答案

【问题标题】：align nav to bottom of header将导航对齐到标题的底部
【发布时间】：2013-07-16 02:31:14
【问题描述】：

我的标题包含一个徽标图像以及我的导航元素。我希望我的导航位于标题的底部，但不使用绝对定位或特定的顶部/左侧像素，因为我希望它具有响应性。

这是我目前的代码

我曾尝试像

一样添加

 nav{margin-top: 50%;}

但它使用了整个页面高度而不是包含的 div 高度。

任何建议或帮助将不胜感激。

【问题讨论】：

标签： html css css-position vertical-alignment

【解决方案1】：

我认为解决此问题的最佳方法是将父容器设置为

position: relative;

并在您的导航中使用

position: absolute;
bottom: 0;
right: 0;

这样，您的导航始终在标题的右下角，但您的标题仍然是相对的，因此您不会失去响应能力。

JSFiddle Here

【讨论】：

效果很好。老实说，我不确定为什么我没有想到。可能是因为我盯着它看了很久。

【解决方案2】：

基本上，我采用了您的徽标和导航，并让它们都显示：inline-block;删除了浮动样式。

然后你可以使用vertical-align:bottom;用于导航元素。

我在这里分叉了你的 jsfiddle http://jsfiddle.net/tQg8d/1/

img{ 
    @extend .layout;
    padding: 10px;
    width: 30%;
    height: auto;
    max-width: 300px;
    display: inline-block;
}

nav{
    position: relative;
    margin: 0;
    padding: 0;
    width: 69%;
    height: auto;
    border: 5px solid $red;
    bottom: 0px;
    display: inline-block;
    vertical-align: bottom;

我还必须使导航的宽度更小一些，因此将其更改为 69%，以便它显示在徽标的右侧。可能是因为边框。

【讨论】：

边框实际上就在那里，所以我可以在开发过程中看到它们的整体元素，完成该部分后它将被删除。

【解决方案3】：

希望这会有所帮助，如果你想增加标题高度和导航宽度可能对你没问题

nav { width :100% }

和

header { max-height : 200px; }

【讨论】：

【解决方案4】：

老实说，我建议您遵循 Jamie 详细介绍的 position:absolute 模型，但如果您想要不同的方式，可以使用一些负边距。

不过，为此，您需要能够指定导航元素的高度（使用 em，因为它们更适合响应式设计）。

所以您只需清除图像后的浮动 - 然后您可以将上边距设置为 -xxx（无论元素的高度是多少）。

这是一个例子：

http://cdpn.io/bfoyj

不如使用绝对定位漂亮，但也可以。

【讨论】：