CSS, Responsive, Lassen Sie Floating-Boxen aufeinander aufbauen
Ich möchte ein reaktionsfähiges Layout erstellen, in dem zwei Spalten vorhanden sind, links und rechts. Auf kleineren Bildschirmen müssen sich die Kästen links in bestimmte Positionen bewegen. Das funktioniert gut mit meinem Code, aber das Problem ist, dass auf großen Bildschirmen eine Lücke auf der rechten Seite zwischen den Boxen ist.
Wie kann ich es lösen?
Die Idee und das Problem
JSFIDDLE
Wenn Sie sich das folgende Beispiel ansehen, sehen Sie, dass es für den kleinen Bildschirm funktioniert, aber die Probleme nicht auf dem großen Bildschirm nach oben gehen. Ich weiß, wie ich es falsch mache, aber wie kann ich mit CSS zu diesem gewünschten Ergebnis kommen?
%Vor%2 Antworten
Das Problem ist die Struktur des HTML, du hast das Hauptdiv nach jedem zu kleinen divs gesetzt. Also wird es zuerst div gedruckt.
Was ich vorschlagen würde ist, die HTML-Struktur so zu ändern;
schweben die linke Spalte links und die rechte Spalte rechts.
Platziere dann um ein div herum
füge media css hinzu, so dass bei 800px (oder was auch immer du willst) du display none; auf .hide800 verbirgst das div, dann füge ein div um deinen aktuellen html hinzu, aber setze einen Inline Stil von display none. Dann bei 800px (oder welcher Größe auch immer du das erste Div verstecken willst) füge css zu display: block !Important;
So funktioniert es, wie Sie es für Browser mit voller Breite benötigen, aber wenn der Bildschirm klein genug ist, um die Struktur zu ändern, können Sie Ihren aktuellen Code verwenden.
html;
%Vor%css;
%Vor%Wenn Sie mich weiter erklären müssen, lassen Sie es mich wissen:)
Tags und Links html css css3 responsive-design