Verwenden moderner CSS zum Aufbau eines reaktionsschnellen Bildnetzes

Dieser Artikel untersucht Techniken zum Beherrschen des Abstands zwischen Spalten in reaktionsschnellen Gitterlayouts unter Verwendung einer reaktionsschnellen Bildergalerie als praktisches Beispiel.

Für weitere Einblicke in reaktionsschnelle Layouts sehen Sie sich unser Screencast an: Erstellen Sie mehrere Spaltenlayouts in Flexbox.

Key Takeaways:

• benutzerdefinierte reaktionsschnelle Layouts sind erreichbar, indem der Abstand zwischen den Spalten genau gesteuert wird, wie mit der Responsive Bildergalerie gezeigt.
• Die display: inline-block -Methode erstellt reaktionsschnelle Bildgalerien; Das Einstellen der Schriftgröße des übergeordneten auf Null beseitigt den Standard-Inline-Block-Abstand.
• Flexbox löst effizient gemeinsam
Medienabfragen und CSS -Gitterlayouts ermöglichen Responsive Image Grids und Anwenden verschiedener CSS -Regeln basierend auf den Geräteeigenschaften (Bildschirmgröße).

Erstellen eines reaktionsschnellen Layouts:

Auf größeren Bildschirmen ähnelt die Galerie Folgendes:

auf kleineren Bildschirmen:

Das einfache Markup:

<code class="language-html"><div>
  <a href="https://www.php.cn/link/14d2bc475177e1dde633b4ca1972d53c">
    <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Using Modern CSS to Build a Responsive Image Grid ">
  </a>
  <!-- ...more images... -->
</div></code>

Mehrere Layoutmethoden erreichen dies. Bevor Sie zwei erkunden, wiederholen wir die Anforderungen:

Zwei-Spalten-Layout auf mittleren und kleineren Bildschirmen.
8PX Inter-Spalnn-Abstand.

Verwenden Sie : inline-block

Die

-Methode erstellt die Galerie. Betrachten Sie dieses CSS: display: inline-block

<code class="language-css">div {
  font-size: 0;
}

a {
  font-size: 16px;
  display: inline-block;
  margin-bottom: 8px;
  width: calc(50% - 4px);
  margin-right: 8px;
}

a:nth-of-type(2n) {
  margin-right: 0;
}

@media screen and (min-width: 50em) {
  a {
    width: calc(25% - 6px);
  }

  a:nth-of-type(2n) {
    margin-right: 8px;
  }

  a:nth-of-type(4n) {
    margin-right: 0;
  }
}</code>

Erläuterung:

Standard-Inline-Block-Abstand wird überschrieben, indem die Schriftgröße der Eltern auf Null gesetzt wird. Schriftgrößen für untergeordnete Elemente müssen möglicherweise zurückgesetzt werden (nicht hier).

Kleine Bildschirme haben ein zweispaliges Layout mit 8px-Abstand. Spaltenbreite Berechnung:

Gesamtraum zwischen den Spalten pro Zeile: 1 * 8px = 8px (8px, nicht 16px, da der rechte Rand aus jeder zweiten Spalte entfernt wird.
Spaltenbreite:
• (4px = 8px / 2). calc(50% - 4px)

Große Bildschirme haben ein vierspaliges Layout mit 8px-Abstand. Spaltenbreite Berechnung:

Gesamtraum zwischen den Spalten pro Zeile: 3 * 8px = 24px (24px, nicht 32px, da der rechte Rand aus jeder vierten Spalte entfernt wird.
Spaltenbreite:
• (6px = 24px / 4). calc(25% - 6px)

Siehe die Codepen -Demo für die Methode

. inline-block

Verwenden von FlexBox:

Die inline-block Lösung hat Nachteile. Das Hinzufügen von Bildunterschriften zeigt eine:

aktualisiertes Markup:

<code class="language-html"><div>
  <a href="https://www.php.cn/link/14d2bc475177e1dde633b4ca1972d53c">
    <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Using Modern CSS to Build a Responsive Image Grid ">
  </a>
  <!-- ...more images... -->
</div></code>

große Bildschirmgalerie mit Bildunterschriften:

ungleiche Höhen werden mit Flexbox aufgelöst. Aktualisieren Sie das CSS des übergeordneten Elements:

<code class="language-css">div {
  font-size: 0;
}

a {
  font-size: 16px;
  display: inline-block;
  margin-bottom: 8px;
  width: calc(50% - 4px);
  margin-right: 8px;
}

a:nth-of-type(2n) {
  margin-right: 0;
}

@media screen and (min-width: 50em) {
  a {
    width: calc(25% - 6px);
  }

  a:nth-of-type(2n) {
    margin-right: 8px;
  }

  a:nth-of-type(4n) {
    margin-right: 0;
  }
}</code>

Das Ergebnis sind Spalten mit gleichem hohen Spalten über alle Bildschirme. Beispiel für großes Bildschirm:

Siehe die Codepen -Demo mit Flexbox mit verbesserten Bildunterschriften.

Die

Flexbox -Eigenschaft justify-content erstellt dieses Layout nicht direkt. space-between und space-around führen zu einer unangenehmen Verteilung in der letzten Reihe. CSS:

<code class="language-html"><div>
  <a href="https://www.php.cn/link/14d2bc475177e1dde633b4ca1972d53c">
    <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Using Modern CSS to Build a Responsive Image Grid ">
    <figcaption>Some text here</figcaption>
  </a>
  <!-- ...more images... -->
</div></code>

nein margin-right wird benötigt; justify-content verarbeitet Elementverteilung.

Siehe die Codepen -Demo mit der Eigenschaft justify-content.

Schlussfolgerung:

Diese Post detailliert Techniken zur Steuerung zwischen den Spaltabstand in reaktionsschnellen Bildnetze. Während inline-block ausreicht, ist Flexbox einfacher und bequemer, insbesondere mit calc().

Erfahren Sie mehr über Flexbox -Layouts in unserem ScreenCast: Erstellen mehrerer Spaltenlayouts in Flexbox.

(FAQS -Abschnitt für Kürze weggelassen, da es sich um eine Wiederholung von gemeinsamen reaktionsschnellen Designfragen handelt.)

Das obige ist der detaillierte Inhalt vonVerwenden moderner CSS zum Aufbau eines reaktionsschnellen Bildnetzes. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!