Sie können nur mit CSS ein ansprechendes Quadratraster mit vertikal und horizontal zentriertem Inhalt erstellen . Ich werde erklären, wie in einem schrittweisen Prozess, aber zuerst hier sind 2 Demos von dem, was Sie erreichen können:
Nun wollen wir sehen, wie man diese ausgefallenen reaktionsschnellen Quadrate macht!
1. Erstellen der Antwortquadrate:
Der Trick, um Elemente quadratisch zu halten (oder ein anderes Seitenverhältnis), besteht darin, Prozent zu verwenden padding-bottom.
Randnotiz: Sie können auch die obere Polsterung oder den oberen / unteren Rand verwenden, aber der Hintergrund des Elements wird nicht angezeigt.
Da die obere Polsterung gemäß der Breite des übergeordneten Elements berechnet wird ( siehe MDN als Referenz ), ändert sich die Höhe des Elements entsprechend seiner Breite. Sie können jetzt das Seitenverhältnis entsprechend der Breite beibehalten.
An dieser Stelle können Sie Folgendes codieren:
HTML :
<div></div>
CSS
div {
width: 30%;
padding-bottom: 30%; /* = width for a square aspect ratio */
}
Hier ist ein einfaches Layoutbeispiel für ein 3 * 3-Quadrat-Raster unter Verwendung des obigen Codes.
Mit dieser Technik können Sie jedes andere Seitenverhältnis erstellen. In der folgenden Tabelle sind die Werte der Bodenpolsterung entsprechend dem Seitenverhältnis und einer Breite von 30% angegeben.
Aspect ratio | padding-bottom | for 30% width
------------------------------------------------
1:1 | = width | 30%
1:2 | width x 2 | 60%
2:1 | width x 0.5 | 15%
4:3 | width x 0.75 | 22.5%
16:9 | width x 0.5625 | 16.875%
2. Hinzufügen von Inhalten innerhalb der Quadrate
Da Sie Inhalte nicht direkt in die Quadrate einfügen können (dies würde ihre Höhe erweitern und Quadrate wären keine Quadrate mehr), müssen Sie untergeordnete Elemente (in diesem Beispiel verwende ich divs) in ihnen erstellen position: absolute;und den Inhalt in sie einfügen . Dadurch wird der Inhalt aus dem Fluss entfernt und die Größe des Quadrats beibehalten.
Vergessen Sie nicht,position:relative; die übergeordneten Divs hinzuzufügen, damit die absoluten Kinder relativ zu ihren Eltern positioniert sind.
Fügen wir unserem 3x3-Quadratgitter einige Inhalte hinzu:
HTML :
<div class="square">
<div class="content">
.. CONTENT HERE ..
</div>
</div>
... and so on 9 times for 9 squares ...
CSS :
.square {
float:left;
position: relative;
width: 30%;
padding-bottom: 30%; /* = width for a 1:1 aspect ratio */
margin:1.66%;
overflow:hidden;
}
.content {
position:absolute;
height:80%; /* = 100% - 2*10% padding */
width:90%; /* = 100% - 2*5% padding */
padding: 10% 5%;
}
ERGEBNIS <- mit etwas Formatierung, um es hübsch zu machen!
3.Zentrieren des Inhalts
Horizontal:
Dies ist sehr einfach, man muss nur hinzufügen text-align:centerzu .content.
ERGEBNIS
Vertikale Ausrichtung
Das wird ernst! Der Trick ist zu verwenden
display:table;
/* and */
display:table-cell;
vertical-align:middle;
Wir können display:table;on .squareoder .contentdivs jedoch nicht verwenden, da dies in Konflikt steht. Daher position:absolute;müssen wir zwei Kinder in .contentdivs erstellen . Unser Code wird wie folgt aktualisiert:
HTML :
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell">
... CONTENT HERE ...
</div>
</div>
</div>
</div>
... and so on 9 times for 9 squares ...
CSS:
.square {
float:left;
position: relative;
width: 30%;
padding-bottom : 30%; /* = width for a 1:1 aspect ratio */
margin:1.66%;
overflow:hidden;
}
.content {
position:absolute;
height:80%; /* = 100% - 2*10% padding */
width:90%; /* = 100% - 2*5% padding */
padding: 10% 5%;
}
.table{
display:table;
height:100%;
width:100%;
}
.table-cell{
display:table-cell;
vertical-align:middle;
height:100%;
width:100%;
}
Wir sind jetzt fertig und können uns das Ergebnis hier ansehen:
bearbeitbare Geige hier
