Ich dachte, das wäre einfach, aber es ist ein bisschen Kopfschmerzen. Ich versuche, ein Raster aus Bildern neu zu zentrieren, wenn der Benutzer die Größe des Browsers ändert und einen (oder mehrere) von ihnen in die nächste Zeile einfügt.
Ich habe versucht, das Grid-Wrapper-Display anzuzeigen: Inline-Block; und es ist ein Elternteil ein Wert von text-align: center; Die Elemente werden jedoch nicht neu zentriert, wenn sie in eine neue Zeile eingefügt werden. Hilfe geschätzt.
Für eine visuelle Darstellung dessen, was ich erreichen möchte, sehen Sie sich hier http://ianclarke.ca/div-reflow.png an .
HTML:
%Vor%CSS:
%Vor%Ich habe eine sehr ähnliche Frage mit zwei funktionalen Antworten gefunden. Einer verwendet JS und der andere Platzhalterelemente. Beide sind nicht sehr hübsch, aber beide scheinen das Inline-Block-Whitespace-Wrap-Problem zu umgehen.
Einen Container für Inline schrumpfen und zentrieren -Blockelemente
Bitte fügen Sie float:left zur Klasse .project-thumbnail für die Browser-Haltepunkte hinzu, die für verschiedene Browser- / Bildschirm- / Gerätegrößen spezifisch sind.
Fügen Sie margin: 0, auto; der folgenden Klasse hinzu.
Beim Durchlaufen des Codes PHP habe ich verstanden, dass das DIV mit dem Klassennamen .project-thumbnail durch WHILE Schleifeniterationen wiederholt wird.
Tags und Links css responsive-design
