1

私のヘッダーには、ロゴ画像とナビゲーション要素が含まれています。ナビゲーションをヘッダーの下部に配置したいのですが、応答性を高めたいため、絶対配置または特定の左上/左ピクセルを使用しません。

これまでの私のコードは次のとおりです

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

私はのように追加しようとしました

 nav{margin-top: 50%;}

ただし、含まれている div の高さではなく、ページ全体の高さを使用していました。

提案や助けをいただければ幸いです。

4

4 に答える 4

6

これを解決する最善の方法は、親コンテナを

position: relative;

そしてあなたのナビで、

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

このように、ナビゲーションは常にヘッダーの右下隅にありますが、ヘッダーは依然として相対的であるため、応答性が失われることはありません。

JSFiddleここに

于 2013-07-17T14:02:24.143 に答える
0

基本的に、私はあなたのロゴとナビゲーションを取り、両方を表示させました: inline-block; float スタイルを削除しました。

次に、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% に変更しました。国境のせいかもしれません。

于 2013-07-17T14:07:46.803 に答える
0

ヘッダーの高さとナビゲーションの幅を増やしたい場合は、これが役立つことを願っています

nav { width :100% }

と

header { max-height : 200px; }
于 2013-07-17T14:11:41.180 に答える
0

正直なところposition:absolute、ジェイミーが詳述したモデルに従うことをお勧めしますが、別の方法が必要な場合は、マイナスのマージンを使用できます.

ただし、このためには、nav 要素の高さを指定できる必要があります (レスポンシブ デザインでうまく機能するため、ems を使用してください)。

したがって、画像の後のフロートをクリアするだけで、上部マージンを -xxx (要素の高さに関係なく) に設定できます。

次に例を示します。

http://cdpn.io/bfoyj

絶対配置を使用するほどきれいではありませんが、機能します。

于 2013-07-17T14:11:51.650 に答える