richten Sie mit der navigationssteuerung unten auf der Kopfzeile

Mein header enthält ein logo-Bild als auch meine nav-element. Ich möchte mein nav zu sitzen an der Unterseite der header, aber ohne absolute Positionierung oder bestimmten oben/Links die Pixel, weil ich möchte, dass diese zu reagieren.

Hier ist mein code bisher

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

Hatte ich versucht, indem Sie wie ein

 nav{margin-top: 50%;}

aber, die die Seite in voller Höhe eher als die mit div-Höhe.

Anregungen oder Hilfe wäre sehr geschätzt.

InformationsquelleAutor JSturgessMeyers | 2013-07-17

  1. 5

    Ich denke, der beste Weg für Sie, um dieses Problem zu lösen, ist, um Ihre übergeordneten container zu

    position: relative;

    und in Ihrem nav, verwenden Sie

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

    diese Weise, Ihre nav ist immer in der rightbottom Ecke der Kopfzeile, aber dein header ist noch relativ, also verlieren Sie nicht die Reaktionsfähigkeit.

    JSFiddle Hier

    Das funktionierte perfekt. Ehrlich gesagt nicht sicher, warum das nicht hatte, ist mir eingefallen. Wahrscheinlich, weil ich einfach nur und starrte ihn für zu lang.

    InformationsquelleAutor Jamie De Palmenaer

  2. 0

    Grundsätzlich, ich nahm Ihr logo und die nav und machte Sie beide display: inline-block; Entfernt die float-styles.

    Dann können Sie die vertical-align: bottom; für die nav-element.

    Ich gespaltener Ihre jsfiddle hier 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;

    Hatte ich auch um die Breite des nav ein wenig kleiner, so dass es geändert 69%, so dass es zeigt, bis auf der rechten Seite des Logos. Vielleicht, weil die Grenze.

    Die Grenze ist eigentlich nur da, damit ich sehen kann, die Elemente in Ihrer Gesamtheit als ich entwickle, wird es entfernt, nachdem ich zum Schluss, dass Abschnitt.

    InformationsquelleAutor michaellee

  3. 0

    Hoffe, dass dies helfen wird, wenn, wie zu erhöhen header-Höhe und und nav kann die Breite gut

    nav { width :100% }

    und 

    header { max-height : 200px; }

    InformationsquelleAutor Sun_Sparxz

  4. 0

    Ich würde ehrlich gesagt schlage vor, Sie Folgen Sie den position:absolute Modell, dass Jamie detailliert, aber wenn Sie möchten eine andere Art und Weise, können Sie einige negative Gewinnspannen.

    Für diese, obwohl, müssen Sie in der Lage sein zu geben die Höhe des nav-element (ems verwenden, wie Sie besser arbeiten mit responsive designs).

    So würden Sie nur deaktivieren Sie das float nach dem Bild-dann kannst du den oberen Rand zu -xxx (unabhängig von der Höhe des Elements).

    Hier ist ein Beispiel:

    http://cdpn.io/bfoyj

    Nicht so schön wie mit der absoluten Positionierung, aber auch funktioniert.

    InformationsquelleAutor robooneus

Schreibe einen Kommentar