Question

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

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

我曾尝试像

一样添加

 nav{margin-top: 50%;}

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

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

Answer 1

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

position: relative;

并在导航栏中，使用

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

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

JSFiddle Here

Answer 2

基本上，我拿了你的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％，以便显示在徽标的右侧。可能是因为边界。

Answer 3

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

nav { width :100% }

和

header { max-height : 200px; }

Answer 4

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

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

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

以下是一个例子：

http://cdpn.io/bfoyj

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

将导航到标题的底部

4 个答案: