Sehr einfache CSS-Frage, zu der ich bis jetzt keine Antwort finden konnte:
Ich versuche, eine Seite mit zwei div nebeneinander in einer Reihe (mit float: links; und float: rechts;) und dann ein div unter ihnen. Das Problem ist, dass, wenn die obere Zeile (definiert als ein div selbst) so breit ist, dass der Abstand zwischen den beiden divs das untere div aufnehmen kann, das bottom div sich in die obere Zeile bewegt und das Aussehen einer einzelnen Zeile von drei divs erzeugt . Ich weiß nicht, ob das klar ist oder nicht, aber hier ist der Code:
%Vor%Also, wie oben, da das obere div eine 200px Lücke zwischen seinen linken und rechten Kindelementen hat, gleitet das Bild in der unteren div zwischen ihnen nach oben. Wenn ich die obere div's Breite 399px mache, passiert das nicht. Ich habe versucht, die CSS "clear" -Eigenschaft zu verwenden, aber das hat das Problem nicht gelöst. Ich habe mich immer mit diesem scheinbar seltsamen Verhalten auf schlampige Weise herumgearbeitet, möchte aber eine bessere Praxis finden.
Jede Hilfe oder Anweisung wird sehr geschätzt!
Verwenden Sie overflow:auto für das erste div
Dies bewirkt, dass das Container-div auf die Inhalte seiner untergeordneten Elemente erweitert wird. Daher behält das folgende div seinen Speicherort bei.
Ich würde ein Div hinzufügen, um die Floats zu löschen:
%Vor%Ich denke, die obigen Vorschläge bezüglich style="clear: both;" sind genau richtig. Ich könnte jedoch versuchen, diesen Stil zu Ihrem vorhandenen "untersten" div hinzuzufügen. Es könnte speichern Sie ein neues div hinzufügen.
Ich hoffe, es ist nicht spät, aber ich hatte das gleiche Problem und habe es herausgefunden. Hat mit der unteren Div zu tun. Stellen Sie Höhe und Breite für das untere Div auf 100% ein und setzen Sie den Überlauf automatisch auf das untere Div. Jetzt bewegt sich das Div nicht mehr nach oben, um Platz zu füllen.