Ich möchte, dass ein Div immer rechts von seinem übergeordneten Div steht, also benutze ich float:right
. Es klappt.
Ich möchte aber auch, dass es beim Einfügen keine Auswirkungen auf andere Inhalte hat, also verwende ich position:absolute
.
Funktioniert jetzt float:right
nicht, mein div befindet sich immer links vom übergeordneten div. Wie kann ich es nach rechts verschieben?
left:50%
undmargin-left:-??px
(?? abhängig von Ihrer Div-Breite)Im Allgemeinen
float
handelt es sich um eine relative Positionierungsanweisung, da sie die Position des Elements relativ zu seinem übergeordneten Container angibt (nach rechts oder links schwebend). Dies bedeutet, dass es nicht mit derposition:absolute
Eigenschaft kompatibel ist , daposition:absolute
es sich um eine absolute Positionierungsanweisung handelt. Sie können entweder ein Element schweben lassen und dem Browser erlauben, es relativ zu seinem übergeordneten Container zu positionieren, oder Sie können eine absolute Position angeben und das Element zwingen, unabhängig von seinem übergeordneten Element an einer bestimmten Position angezeigt zu werden. Wenn Sie möchten, dass ein absolut positioniertes Element auf der rechten Seite des Bildschirms angezeigt wird, können Sie es verwendenposition: absolute; right: 0;
. Dadurch wird das Element jedoch immer am rechten Rand des Bildschirms angezeigt, unabhängig davon, wie breit das übergeordnete Elementdiv
ist (also hat es gewonnen). t sei "rechts von seinem Eltern-Div").quelle
div
istposition: relative
, befindet sich dieserdiv
rechts neben dem übergeordneten Element und nicht auf dem Bildschirm.Sie können " translateX (-100%) " und " text-align: right " verwenden, wenn Ihr absolutes Element " display: inline-block " ist.
Sie erhalten ein absolutes Element, das auf den rechten Verwandten ausgerichtet ist
quelle
Vielleicht sollten Sie Ihren Inhalt wie folgt mit Floats teilen:
Beachten
overflow: auto;
Sie Folgendes : Dies soll sicherstellen, dass Ihr Container eine gewisse Höhe hat. Durch schwebende Objekte werden sie aus dem DOM entfernt. Um sicherzustellen, dass sich Ihre Elemente unten nicht mit Ihren wandernden Schwimmern überschneiden, stellen Sie einen Containerdiv
mit einemoverflow: auto
(oderoverflow: hidden
) ein, um sicherzustellen, dass Schwimmer beim Zeichnen Ihrer Höhe berücksichtigt werden. Weitere Informationen zu Floats und deren Verwendung finden Sie hier .quelle
Ich konnte ein rechts schwebendes Element mit einer Verschachtelungsschicht und einem kniffligen Rand absolut positionieren:
Ich habe beschlossen, dies umschaltbar zu machen, damit Sie sehen können, wie es den Fluss des umgebenden Textes nicht beeinflusst (führen Sie es aus und drücken Sie die Taste, um das schwebende absolute Feld ein- / auszublenden).
quelle