So erreichen Sie nebeneinander liegende Bilder in Javascript

Im Webdesign werden Bilder häufig nebeneinander verwendet und angezeigt, beispielsweise in Produktpräsentationen oder in Nachrichtenberichten. Wie erstelle ich nebeneinander liegende Bilder? Im Folgenden wird erläutert, wie Sie mithilfe von JavaScript nebeneinander liegende Bilder erstellen.

1. Flexbox-Layout verwenden

Flexbox ist ein neuer Layoutmodus in CSS3, mit dem Elemente einfach ausgerichtet und angeordnet werden können. Mit dem Flexbox-Layout können wir Bilder problemlos nebeneinander anzeigen.

Zuerst müssen Sie einen Container in CSS einrichten, die Anzeigeeigenschaft des Containers auf „Flex“ setzen und dann die Bilder, die nebeneinander angezeigt werden sollen, in den Container einschließen. Als Nächstes können Sie die Größe und Position des Bildes anpassen, indem Sie die Flex-Eigenschaft des Elements im Container festlegen.

Sieht so aus:

HTML-Code:

<div class="container">
  <img src="image1.jpg" alt="image1">
  <img src="image2.jpg" alt="image2">
  <img src="image3.jpg" alt="image3">
</div>

CSS-Code:

.container {
  display: flex;
  justify-content: space-between;
}

2. Verwendung der CSS-Float-Eigenschaft

Mit der CSS-Float-Eigenschaft können Sie ein Element entlang der linken oder rechten Seite seines Containers schweben lassen, während andere Elemente werden es umgeben. Verwenden Sie dieses Attribut, um Bilder nebeneinander anzuzeigen.

Zuerst müssen Sie das Float-Attribut der Bilder, die nebeneinander angezeigt werden sollen, in CSS festlegen und es auf links oder rechts einstellen. Als nächstes können Sie die Randeigenschaft verwenden, um den Abstand der Bilder anzupassen.

Wie unten gezeigt:

HTML-Code:

<div class="container">
  <img src="image1.jpg" alt="image1" style="float: left;">
  <img src="image2.jpg" alt="image2" style="float: right;">
  <img src="image3.jpg" alt="image3" style="float: left;">
</div>

CSS-Code:

.container img {
  margin: 10px;
}

3. CSS-Rasterlayout verwenden

CSS-Rasterlayout ist eine tabellenartige Layoutmethode, die die Seite in Zeilen und Spalten unterteilen kann ist flexibler. Mithilfe des CSS-Grid-Layouts können Sie Bilder problemlos nebeneinander anzeigen.

Zuerst müssen Sie einen Container in CSS einrichten, die Anzeigeeigenschaft des Containers auf „Grid“ setzen und dann die Spaltenbreite des Bildes über die Eigenschaft „grid-template-columns“ festlegen. Als nächstes können Sie die Bilder, die nebeneinander angezeigt werden sollen, in das Raster einfügen und die Position und Größe der Bilder anpassen.

Sieht so aus:

HTML-Code:

<div class="container">
  <img src="image1.jpg" alt="image1">
  <img src="image2.jpg" alt="image2">
  <img src="image3.jpg" alt="image3">
</div>

CSS-Code:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

.container img {
  width: 100%;
  height: auto;
}

Der obige Code unterteilt den Container in drei Spalten, jede Spalte ist gleich breit und hat einen Abstand von 10 Pixel. Die Bildbreite ist auf 100 % eingestellt und die Höhe ist adaptiv.

Zusammenfassung

Das Obige stellt drei Möglichkeiten vor, JavaScript zu verwenden, um nebeneinander liegende Bilder zu erstellen: Verwendung des Flexbox-Layouts, der CSS-Float-Eigenschaft und des CSS-Grid-Layouts. Jede dieser Methoden hat ihre eigenen Vor- und Nachteile und kann je nach Bedarf ausgewählt und eingesetzt werden. In beiden Fällen können Sie Bilder problemlos nebeneinander anzeigen, um Ihre Webseite schöner und attraktiver zu gestalten.

Das obige ist der detaillierte Inhalt vonSo erreichen Sie nebeneinander liegende Bilder in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!