將nav導航到標題底部

我的標題包含徽標圖像以及導航元素。我希望我的導航欄位於標題的底部，但不使用絕對定位或特定的頂部/左側像素，因爲我希望它能夠響應。將nav導航到標題底部

這裏是我到目前爲止的代碼

我曾嘗試添加像

nav{margin-top: 50%;}

，但所使用的全頁面高度，而不是包含div高度。

任何建議或幫助，將不勝感激。

來源

2013-07-17 JSturgessMeyers

我想爲你解決這個問題的最好辦法，就是你的父容器設置爲

position: relative;

，並在你的資產淨值，使用

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

這樣，你的資產淨值是永遠在你的標題的右下角，但你的標題仍然是相對的，所以你不會失去響應。

的jsfiddle Here

來源

2013-07-17 14:02:24

完美的工作。老實說不知道爲什麼我沒有想到這一點。可能是因爲我剛剛一直盯着它。 – JSturgessMeyers

基本上，我把你的標誌和導航，使他們既顯示：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％的寬度，使其最多顯示徽標的權利。可能是因爲邊界。

來源

2013-07-17 14:07:46 michaellee

邊框實際上只是在那裏，所以我可以看到整個元素，因爲我正在開發，它會在完成該部分後被刪除。 – JSturgessMeyers

希望這會有所幫助，如果想增加頭部高度，和NAV寬度可以替你安排

nav { width :100% }

和

header { max-height : 200px; }

來源

2013-07-17 14:11:41

我就老老實實建議你遵循position:absolute模型傑米詳細的，但如果你想以不同的方式，你可以使用一些負邊距。

對於這一點，不過，你需要能夠指定導航元素的高度（使用EMS，因爲他們與響應的設計更好的工作）。

所以你只需清除浮動後的圖像 - 那麼你可以設置頂部邊界爲-XXX（無論元素的高度）。

下面是一個例子：

http://cdpn.io/bfoyj

不一樣漂亮使用絕對定位，而且也適用。

來源

2013-07-17 14:11:51 robooneus

將nav導航到標題底部

回答

相關問題