Wie positioniere ich ein Element auf der rechten Seite?

Lesezeit: 4 Minuten

Benutzeravatar von Frank G
Frank G.

Ich versuche, ein CSS-Element auf der rechten Seite des Headers zu platzieren, bin mir aber nicht sicher, wie ich das machen soll. Ich habe versucht mit:

 position: Absolute; top: 20px; right 0px; 

Das würde funktionieren, aber wenn Sie den Browser anpassen, bewegt sich der Text mit.

Ich habe ein JFiddle erstellt, das Sie hier finden können:

http://jsfiddle.net/rKWXQ/

Auf diese Weise können Sie sehen, was ich versuche zu tun. Ich habe einen Text in einem umschlossenen div-Element mit der Aufschrift Jetzt anrufen (555) 555-5555.

Hier ist das Header-Element und darin habe ich ein right_header-Element.

    <div id="header">
        <span class="right_header">Call Now (555) 555-5555</span>
    </div>

Hier ist mein Header-CSS:

   /* Header */
   #header {margin: auto; width: 1007px; height: 123px; background: url(../images/logo.png) no-repeat 20px; background-color: #37352b; border: 1px solid #862209;}
  .right_header{color: #fff; position: absolute; top: 70px; right: 0px}

Kann mir bitte jemand den richtigen Weg sagen, um dies zu erreichen?

Beachten Sie, dass auf der linken Seite ein Logo vorhanden ist, das in JFiddle nicht geladen wird!

Danke!

Sie können einfach nur float es nach rechts, keine Notwendigkeit für relative oder absolute Positionierung.

.right_header {
    color: #fff;
    float: right;
}

jsFiddle aktualisiert – Möglicherweise müssen einige hinzugefügt werden padding/marginsso was.

  • Das hat es geschafft!!! Ugg, warum habe ich nicht daran gedacht, hahaha, es tut mir leid, ich hätte es bekommen sollen! Jetzt bin ich enttäuscht, dass ich versucht habe, dieses Zeug zu lernen, und ich habe es verpasst. Danke schön!

    – Frank G.

    9. Oktober 2013 um 5:05 Uhr

  • Schlagen Sie mich dazu, +1 : P Weiterführende Lektüre: Dies wird nützlich sein, wenn Sie Dinge in nicht schwebenden Containern schweben lassen: webtoolkit.info/css-clearfix.html

    – francisco.preller

    9. Oktober 2013 um 5:06 Uhr


  • @francisco.preller Ja, das könnte hilfreich sein. Alternativ bewerben overflow:hidden an den Elternteil funktioniert im Wesentlichen genauso wie ein Clearfix – er zwingt ihn, seine Kinder zu enthalten.

    – Josh Crozier

    9. Oktober 2013 um 5:08 Uhr

  • Wusste nichts von overflow:hidden, nett danke. Scheint, dass es einige Vorbehalte gibt: stackoverflow.com/questions/5565668/is-clearfix-deprecated

    – francisco.preller

    9. Oktober 2013 um 5:11 Uhr

  • @francisco.preller dieser Link war hilfreich! Danke schön!!

    – Frank G.

    9. Oktober 2013 um 5:18 Uhr

Zwei weitere Möglichkeiten, dies zu tun:

  1. Verwenden Sie Ränder für das Element, das Sie rechts von seinem übergeordneten Element positionieren möchten.
.element {
  margin-right: 0px;
  margin-left: auto;
}
  1. Verwenden von Flexbox für das übergeordnete Element:
.parent {
  display: flex;
  justify-content: right;
}

Wie JoshC erwähnte, mit float ist eine Option. Ich denke, Ihre Situation legt jedoch eine andere Lösung nahe.

Sie müssen einstellen position: relative auf Ihrem #header Element, um für die position: absolute auf Ihrem #right_header wirksam werden. Sobald Sie das eingestellt haben, können Sie frei positionieren #right_header wie auch immer Sie wollen relativ zu #header

  • Danke das war sehr hilfreich! Aber Float kann es tun. Gibt es einen Unterschied zwischen der Verwendung eines Floats oder einer Position? Oder sollte ich sagen, ist es besser, Position vs Float zu verwenden?

    – Frank G.

    9. Oktober 2013 um 5:14 Uhr

  • @FrankG. Normalerweise vermeide ich die absolute Positionierung aus genau dem Grund, den Sie erwähnt haben, aber Floats haben auch ihre Tücken. Erwähnenswert ist, dass absolut positionierte Elemente aus dem normalen Ablauf herausgenommen werden.

    – Josh Crozier

    9. Oktober 2013 um 5:16 Uhr

Sie können dies auch tun, wenn Sie mit der Position arbeiten möchten. Versuchen Sie dies bitte

 #header {margin: auto; position:relative; width: 1007px; height: 123px; background: url(../images/logo.png) no-repeat 20px; background-color: #37352b; border: 1px solid #862209;}


.right_header{color: #fff; position: absolute; top: 0px; right: 0px}

Die Antwort mit Floats von JoshC wird gut funktionieren, aber ich denke, es gibt einen Grund, warum dies nicht funktioniert.

Der Grund, warum Ihr Code nicht funktioniert, ist, dass die absolute Position relativ zu ist, die die Dimensionen 0x0 hat.

Das ” sollte absolut positioniert sein, damit dieser Code funktioniert.

#header {margin: auto; width: 1007px; height: 123px; background: url(../images/logo.png) no-repeat 20px; background-color: #37352b; border: 1px solid #862209;}

ändere es auf …

#header {margin: auto; position: absolute; left: 0px; right: 0px; top 0px; height: 123px; background: url(../images/logo.png) no-repeat 20px; background-color: #37352b; border: 1px solid #862209;}

Benutzeravatar von Aya Ramzy Abed
Aya Ramzy Abed

<div><button>Continue</button></div>

Schaltfläche rechts von div machen

<style>
button {
 display:block;
 margin-left:auto;
}
</style>

1445710cookie-checkWie positioniere ich ein Element auf der rechten Seite?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy