将导航到标题的底部

时间:2013-07-17 13:44:55

标签: html css css-position vertical-alignment

我的标题包含徽标图像以及我的导航元素。我希望我的导航设备位于标题的底部,但不使用绝对定位或特定的顶部/左侧像素,因为我希望它能够响应。

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

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

我曾尝试像

一样添加
 nav{margin-top: 50%;} 

但是使用了整页高度而不是包含div高度。

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

4 个答案:

答案 0 :(得分:5)

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

position: relative;

并在导航栏中,使用

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

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

JSFiddle Here

答案 1 :(得分:0)

基本上,我拿了你的logo和导航,并将它们都显示出来:inline-block;删除了浮动样式。

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

我在这里分发你的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%,以便显示在徽标的右侧。可能是因为边界。

答案 2 :(得分:0)

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

nav { width :100% }

header { max-height : 200px; }

答案 3 :(得分:0)

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

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

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

以下是一个例子:

http://cdpn.io/bfoyj

不如使用绝对定位那么漂亮,但也有效。