In HTML werden Bilder für verschiedene Zwecke verwendet und normalerweise in der vertikalen Form getrennt angezeigt. Manchmal müssen Sie jedoch möglicherweise Bilder nebeneinander platzieren, um ein stilvolles Layout zu erstellen oder einen anderen Zweck der Webentwicklung zu erfüllen.

In diesem Artikel werden wir diskutieren, wie zwei Divs nebeneinander in CSS platziert werden können:

• schweben
• Netz
• biegen

Lass uns anfangen!

Methode 1: Platzieren Sie zwei Divs nebeneinander in CSS mit Float

In CSS, die “schwebenEigenschaft gibt die schwimmende Richtung eines Elements an. Es platziert ein Element auf der rechten oder linken Seite des Behälter.

Syntax

Die Syntax der Float -Eigenschaft lautet:

float: keine | links | rechts

Hier ist die Beschreibung im Zusammenhang mit dem oben genannten Wert der Float-Eigenschaft:

• keiner: Es wird für kein schwimmendes verwendet.
• links: Es wird verwendet, um Elemente auf der linken Seite zu schweben.
• Rechts: Es wird verwendet, um Elemente auf der rechten Seite zu schweben.

Verwendung der "schwebenEigenschaft, Sie können auch Bilder nebeneinander platzieren. Gehen wir zum Beispiel des Beispiels nebeneinander an Seite.

Beispiel 1: Stellen Sie zwei Bilder nebeneinander mithilfe der Float -Eigenschaft ein

Hier haben wir eine Überschrift mit Verwendung hinzugefügt

und erstellte zwei Divs und zugewiesen den Bildquellen.

Html

Stellen Sie Bilder neben CSS Float nebeneinander auf

In CSS werden wir verwenden “.div”Zu beiden Divs zugreifen, die wir in der HTML -Datei erstellt haben. Lassen Sie als nächstes den Wert der Float -Eigenschaft als “zu.“links”. Infolgedessen wird der Effekt auf unsere beiden Behälter angewendet.

CSS

.div
float: links;

Wie Sie sehen können, haben wir Bilder nebeneinander erfolgreich platziert:

Beispiel: Platzieren Sie zwei Bilder neben dem Raum nebeneinander

Wenn Sie zwischen diesen beiden Bildern Platz schaffen und nebeneinander platzieren möchten, verwenden Sie die “BreiteEigenschaft und verweisen Sie ihm einen Wert.

Hier zuweisen wir den Wert der Breite Eigenschaft als “300px”:

.div
float: links;
Breite: 300px;

Speichern Sie den angegebenen Code und überprüfen Sie die Ergebnisse:

Methode 2: Stellen Sie die Bilder nebeneinander mit dem Gitter nebeneinander in CSS ein

Zwei oder mehr als zwei Bilder nebeneinander zu platzieren “NetzLayout wird verwendet. Grundsätzlich ist das Raster ein Wert der Anzeigeeigenschaft, mit der ein Layout erstellt wird, das aus Zeilen und Spalten besteht.

Syntax

Die Syntax der Anzeigeeigenschaft mit Gitterlayout ist wie folgt angegeben:

Anzeige: Grid;

Wechseln wir zum Beispiel.

Beispiel

Hier erstellen wir vier Sub -Divs innerhalb der Hauptnamen Div als "als"Elternteil”Und fügen Sie Bilder mit dem Tag hinzu.

Html

Stellen Sie die Bilder mit CSS -Gitter nebeneinander an

Als nächstes werden wir im CSS -Abschnitt die „verwenden“.Elternteil”So zugreifenNetz”. Danach werden wir den Bruch mit der “festlegenGrid-Template-SäulenEigenschaft zum Erstellen von Raum für Spalten. Angeben "1fr"Dreimal wird erzeugt"dreiSäulen, was bedeutet, dass alle Divs den gleichen Raum haben. Darüber hinaus setzen wir die Lücke zwischen den Spalten mithilfe der Säule-GAP-Eigenschaft und legen ihren Wert als "als" fest "5px”:

.Elternteil
Anzeige: Grid;
Grid-Template-Säulen: 1fr 1fr 1fr;
Säulenlücke: 5px;

Führen Sie die HTML -Datei aus, sobald Sie den CSS -Code vervollständigen, und überprüfen Sie die Ausgabe:

Methode 3: Platzieren Sie zwei Bilder nebeneinander in CSS mit Flex

Der "biegenIst der Wert der Anzeigeeigenschaft, mit der Elemente nebeneinander platziert werden können. In einem solchen Szenario werden Elemente gemäß dem Ansichtsfenster des Anzeigebildschirms festgelegt.

Syntax

Die Syntax der Anzeigeeigenschaft mit Flex ist:

Anzeige: Flex;

Wechseln wir zum Beispiel:

Beispiel

Wir werden die vorherige HTML -Datei betrachten und drei Sub -DIVs in der Hauptdiv hinzufügen und verschiedene Bilderquellen angeben:

Stellen Sie die Bilder mit CSS Flex nebeneinander an

Setzen Sie in CSS den Wert der Anzeigeeigenschaft als "biegen"Und setzen Sie die Spaltenlücke als"5px”:

.Elternteil
Anzeige: Flex;
Lücke: 5px;

Dies wird das folgende Ergebnis geben:

Wir haben drei einfache Möglichkeiten bereitgestellt, Bilder nebeneinander in HTML und CSS zu platzieren.

Abschluss

Die Bilder werden nebeneinander platziert, indem drei verschiedene Methoden von CSS verwendet werden, die die “sindbiegen" Und "NetzWerte der Anzeigeeigenschaft und die “schweben" Eigentum. CSS ermöglicht es Ihnen auch, den Raum oder die Lücke zwischen diesen benachbarten Bildern zu platzieren. In diesem Leitfaden haben wir diese drei Methoden im Detail erörtert und Beispiele für jede Methode zur Verfügung gestellt, um Bilder neben CSS nebeneinander zu platzieren.