Floats im CSS - Lücke/space Links oben, wenn nach rechts gefloatet?
Dies ist ein wenig schwer zu beschreiben, aber im Grunde gibt es zu unerwünschten Leerzeichen Links von einem gefloateten div auf meiner Seite. Hier gibt es Bilder, die das problem beschreiben. Die black boxes sind divs.
Bevor floating:
Nach floating:
Gewünschten Effekt:
Und ich bin mir nicht sicher, ob es einen Unterschied macht, aber ich habe auch ein leeres div mit "clear: both" unmittelbar nach dem gefloateten div.
Wie kann ich das erreichen?
- Wir konnten sehen, die CSS und HTML, die dieses problem verursacht?
- Ich habe versucht, schweben beide divs aber das hat nicht mein problem zu lösen sofort. Das problem war, dass es war ein Schurken-div (unfloated) hängen in zwischen, dennoch verursachen die gleiche Wirkung wie oben. Nach dem Umzug dieses div in der linken, ich war in der Lage zu erreichen, die richtige Wirkung. Die Antwort markiert unten war die, die mir geholfen, es herauszufinden. Vielen Dank für die Antworten alle.
Du musst angemeldet sein, um einen Kommentar abzugeben.
=======versuchen Sie, diese
Wenn möglich, legen Sie die
float: right
div
vor der unfloateddiv
im HTML.Entfernen Sie die clearing-div. Überprüfen Sie auch die padding/margin auf diese divs und sicherzustellen, dass die mit div (parent-div) ist breit genug, um Platz für die zwei untergeordnete divs.
Den ersten
div
solltefloat: left
gesetzt. Sonst ist der erste div ist ein block-element, dauern wird, bis alle vertikalen Raum für sich selbst.Das Problem ist du bist nur floatet div. Sie benötigen, um die margin-right auf die nicht foated div die gleiche Breite wie die Gesamt-Nutzfläche (Breite+paddding+Marge) von den gefloateten div.
Oder alternatiely Sie können schweben beide divs.
Beispiele:
ODER:
Beide divs sollten float left und stellen Sie sicher, dass Sie gleich oder kleiner als die Breite der container, die Sie sind in.
Wenn a1 erscheinen schwebte rechts von a2, dann setzen Sie a1 das ZUERST im html-und schweben Sie nach rechts. Ein bit-Zähler intuitive, aber seine, wie floats arbeiten.
Gibt es einen weißen Raum, Problem mit floats. Das ist, warum die zweite box ist etwas niedriger.
arbeiten.
nicht funktionieren