CSS floats & Überlappende Boxen
Ich habe mich mit CSS herumgeschlagen und versucht, Floats usw. zu verstehen. So sieht das Problem aus:
Wie Sie sehen können, schwebt das gelbe Kästchen hinter dem Grau und hinter ihm. Wie kann ich es vor Box Two stoppen? Hier ist mein Code :
%Vor%4 Antworten
Wenn Sie ein Element schweben, nehmen Sie es aus dem Fluss des DOM heraus. Um mit Box One interagieren zu können, müssen Sie auch Box One schweben lassen:
%Vor%Beachten Sie, dass auch die Breite angegeben ist. Dies liegt daran, dass Sie beide Felder in einen Wrapper einfügen und dessen Breite angeben möchten:
HTML
%Vor%CSS
%Vor%Immer wenn Sie Elemente schweben, ist es eine gute Idee, sie so in einen Wrapper zu legen, dass Sie sie sozusagen wieder ins DOM bringen. Dadurch werden Probleme vermieden, die bei Box One-Rendering hinter Box 2 aufgetreten sind.
Hier ist ein jsFiddle , der alles zusammenbringt. Übrigens, wenn Sie wollen, dass Box Two komplett bündig gegen Box One sitzt, nehmen Sie den linken Rand weg.
BEARBEITEN:
Um Box Two statisch und Box One erweiterbar zu machen, sollten Sie das gleiche CSS und Markup verwenden. Nehmen Sie einfach die Float- und Breiteneigenschaften von Box One und geben Sie ihm einen rechten Rand von 225px (die Breite von Box Two minus dem rechten Rand). Hier ist das aktualisierte jsFiddle .
Sie müssen eine Breite für Ihre Boxen festlegen. Um genau zu sein, müssen Sie den Abstand in% ändern:
%Vor%JS Geige zeigt es besser: hier
Wenn Sie float verwenden, fügen Sie dies am Ende des Floating-Elements hinzu. ( innerhalb des Floating-Elements ).
<div class="clear"> </div>
wobei clear die CSS-Definition wie folgt hat.
Oder wenn Sie clear nicht verwenden, müssen Sie explizit die Breite x Höhe angeben.
Verwenden Sie <div class="clear"> </div> nach das Floating-Element, um zu verhindern, dass die folgenden HTML-Elemente nicht von seinem Float betroffen sind.
Also, mit clear , sollte dein Code wie folgt aussehen:
BEARBEITEN:
Habe gerade deinen Bildschirm gesehen.
%Vor%