Wrapping divs mit Lücken zwischen ihnen
Ich habe Divs, die ich in die nächste Zeile umbrechen möchte, wenn das Browserfenster kleiner wird. Ich möchte auch, dass der Abstand zwischen den Divs liegt, so dass eine Lücke zwischen ihnen besteht. Das Problem, das ich habe, ist, dass der Rand in der Mitte divs bewirkt, dass die divs falsch umbrechen, wenn der Browser auf eine bestimmte Größe festgelegt ist. Bei einer bestimmten Größe haben Sie 2 Divs unter einem Div. Sehen Sie meinen Screenshot unten als ein Beispiel und diese Geige: Ссылка (ändern Sie die Breite des Fensters)
Dies muss wirklich dynamisch sein, da es eine Rahmenlösung für das Layout unterschiedlich großer divs sein wird. Das Eltern-Div ist ähnlich wie das Beispiel. Jede Hilfe wäre toll.
6 Antworten
Ich denke, ich habe die einfachste Lösung für das gefunden, was ich tun möchte, ohne Medienabfragen zu verwenden. Ich habe einfach den rechten Rand zu allen Feldern einschließlich des letzten Felds hinzugefügt, anstatt es zu jedem Feld außer dem letzten Feld hinzuzufügen.
Ich umschließe dann alle Felder in einem anderen Div und füge einen Minusrand (die gleiche Größe wie die Lücken) hinzu, so dass die Felder umbrechen, wenn sie die Seite des Containers treffen. Hier ist eine Geige mit der Lösung: Ссылка
%Vor%Sie können Medienabfragen verwenden, um die CSS auf einem kleineren Bildschirm zu ändern.
Ich würde eine Lösung empfehlen, die die Gitterelemente aus den content-Elementen extrahiert. Daher haben Sie viel mehr Kontrolle über Ihr Layout und Sie können flexibler mit Inhalten sein, die Sie einfügen möchten.
- Verwende deine
.inner-Elemente als Gitterelemente und umschließe Inhalte in ihnen in.inner-content - Wickle alle Inneres in eine Reihe, um die äußere Gosse loszuwerden
- Geben Sie den Elementen
.innereine prozentuale Breite und eine px-max-width . So können die Elmente immer 33,33% der verfügbaren Breite, aber nie mehr als 150px nehmen. - Ich habe einige Anpassungen für kleine Bildschirme vorgenommen, so dass die Elemente
.inneruntereinander überlappen und mehr als 33,33% der.outer-Containerbreite ausmachen. - Untersuchen Sie den Code: Ссылка
Ich würde vorschlagen, Bootstrap-Technik dafür zu verwenden. Packen Sie auf beiden Seiten Ihrer inneren Elemente und negieren Sie sie mit negativem Rand auf dem Container.
Dies erfordert mehr Markup Tough. Während .row und .container auf dasselbe Element zusammengeführt werden könnten, würde die Hintergrundfarbe wegen des negativen Rands nach links überlaufen.
In Ihrem Beispiel sind die ersten zwei divs 170px breit (150 + 20) und das dritte ist 150px breit, da es keinen Rand hat das Problem.
meide @media, wenn du es so anpeilst, dass es vollständig reagiert und nicht von 4 Items in eine Zeile springt, zum Beispiel in eine Zeile.
Sie können Ihr Problem lösen, indem Sie Ihrem letzten Element einfach einen Rand rechts: 20 hinzufügen, aber es ist besser, es zu mögen :
%Vor%weil es den Rand auf die zwei Seiten teilt, wodurch er symmetrischer wird.
Zum Auslegen unterschiedlich großer Divs.
Wenn alle deine divs die Größe ändern können, aber gleich bleiben, funktioniert es, aber wenn die erste div 70 ist und die zweite und dritte 50 sind, gibt es immer zwei divs in der unteren Zeile.