html - 将导航对齐到标题的底部

Question

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

到目前为止，这是我的代码

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

我曾尝试像添加

 nav{margin-top: 50%;} 

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

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

Answer 1

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

position: relative;

并在您的导航中，使用

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

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

JSFiddle这里

Answer 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%，以便它显示在徽标的右侧。可能是因为边界。

Answer 3

希望这会有所帮助，如果想增加标题高度和导航宽度可能适合您

nav { width :100% }

和

header { max-height : 200px; }

Answer 4

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

但是，为此，您需要能够指定导航元素的高度（使用 em，因为它们在响应式设计中效果更好）。

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

这是一个例子：

http://cdpn.io/bfoyj

不如使用绝对定位漂亮，但也有效。