将导航与页眉底部对齐

Question

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

到目前为止，以下是我的代码

http://jsfiddle.net/Aiedail/86ZGd/

我曾尝试像这样添加

 nav{margin-top: 50%;} 

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

如有任何建议或帮助，我们将不胜感激。

Answer 1

我确实认为解决这个问题的最好方法是将您的父容器设置为

position: relative;

在你的导航中，使用

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

这样，你的导航总是在你的标题的右下角，但你的标题仍然是相对的，所以你不会失去响应性。

JSFiddle Here

Answer 2

基本上，我拿了你的logo和导航，并使它们都显示:内联-块；删除浮动样式。

然后，您可以对nav元素使用竖直对齐: 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%，以便它显示在徽标的右侧。可能是因为边界问题。

Answer 3

希望这将是有帮助的，如果喜欢增加标题高度和导航宽度可以为你罚款

nav { width :100% }

和

header { max-height : 200px; }