CSS-Code zum Anordnen von Fotos in Moments

Zunächst können Sie Moments öffnen und mehrere Layouts mit unterschiedlichen Bildanzahlen betrachten oder sich das folgende Beispiel ansehen;

Es ist festzustellen, dass mit Ausnahme von Bild 1 und Bild 4 alle anderen Bilder in einer Zeile und drei Spalten angeordnet sind.

Angenommen, es gibt den folgenden HTML-Code, wobei imgList ein Array von Bildadressen ist;

<ul>
    <li v-for="(Element, Index) in Bildliste" :Schlüssel=Index >
        <img :src="Artikel">
    </li>
</ul>

1. Zunächst verwenden wir Flex, um ein normales dreispaltiges Layout zu erreichen:

Bei Einstellung auf „Umbrechen“ nimmt jedes Element 1/3 der angegebenen Breite ein, mit Ausnahme des letzten Elements (3n) jeder Zeile, das den rechten Rand festlegt und Platz reserviert.

ul{
  Anzeige: Flex;
  Inhalt ausrichten: Flex-Start;
  Flex-Wrap: Umwickeln;
}
li{
  Breite: 32%; 
  Höhe: 100px;
  Rand oben: 5px;
}
.list:nicht(:nth-child(3n)) {
  Rand rechts: 2 %;
}

2. Wenn nur ein Bild vorhanden ist, bestimmen Sie einfach mit dem CSS-Selektor, dass es sich um ein Bild handelt, und ändern Sie die Bildgröße.

Auswahllogik: Wenn das Element das letzte Element und das erste Element ist, kann festgestellt werden, dass nur ein Element vorhanden ist: Legen Sie seinen Stil separat fest, um den ursprünglichen Stil zu überschreiben

ul li:n-tes-letztes-Kind(1):erstes-Kind{
  Breite: 200px;
  Höhe: 200px;
}

3. Im Fall von vier Bildern müssen die Bilder in zwei Zeilen und zwei Spalten angeordnet werden: Hier müssen Sie in diesem Fall beim zweiten Bild einen Rand rechts hinzufügen, um aus drei Spalten zwei Spalten zu machen:

Auswahllogik: Wenn das Element das viertletzte und das erste Element ist, wird davon ausgegangen, dass insgesamt vier Elemente vorhanden sind.
Wählen Sie dann das zweite Element derselben Ebene aus und fügen Sie ihm das Attribut „margin-right“ hinzu.

ul li:n-tes-letztes-Kind(4):erstes-Kind ~ li:n-tes-Kind(2n){
  Rand rechts: 32 %;
}

Zuvor müssen Sie das Intervall des dritten Elements wiederherstellen, oder ähnlich wie bei den Momenten werden die vier Fotos nicht in Intervallen angezeigt. Bei Bedarf können Sie auch andere Attribute wie folgt festlegen: (Dieses Attribut muss vor dem vorherigen Attribut stehen)

ul li:n-tes-letztes-Kind(4):erstes-Kind , ul li:n-tes-letztes-Kind(4):erstes-Kind ~ li{
  Breite: 50%;
  Rand rechts: 0;
}

Zusammenfassen

Dies ist das Ende dieses Artikels über die Verwendung von CSS zum Anordnen von Fotos in Moments. Weitere Informationen zur Anordnung und zum Layout von Bildern mit CSS finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!