3 einfache Möglichkeiten, zwei Divs nebeneinander in CSS zu platzieren

Divs werden hauptsächlich zum Erstellen verschiedener Abschnitte in HTML verwendet, die mit Hilfe des CSS entsprechend gestaltet werden können. Manchmal müssen Sie möglicherweise zwei Divs nebeneinander platzieren, um ein stilvolles Layout zu erstellen. Zu diesem Zweck bietet CSS verschiedene Methoden wie:

• Durch die Nutzung "Netz”
• Durch die Nutzung "biegen”
• Durch die Nutzung "schweben”

In diesem Artikel diskutieren wir jeden der genannten Ansätze nacheinander und geben ein geeignetes Beispiel für jede Methode an.

Also lasst uns anfangen!

Methode 1: Stellen Sie zwei Divs nebeneinander in CSS mit einem Netz

Das CSS “NetzMit dem Layout kann der Benutzer zwei oder mehr zwei Divs nebeneinander platzieren. 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 unten angegeben:

Anzeige: Grid

Schauen wir uns nun ein Beispiel im Zusammenhang mit der Platzierung von zwei Divs nebeneinander in CSS unter Verwendung des Gitterlayouts an.

Beispiel

Hier erstellen wir zwei untergeordnete Divs innerhalb der übergeordneten DIV, die die Klassennamen als “haben“Elternteil","Kind" Und "Kind”:

Als nächstes verwenden Sie im CSS -Abschnitt “.Elternteil”So zugreifenNetz”. Setzen Sie als nächstes den Bruch mit der “Grid-Template-SäulenEigenschaft zum Erstellen von Raum für Spalten. In unserem Fall werden wir Brüche als “festlegen1fr" Und "1fr”, Was bedeutet, dass beide Divs den gleichen Raum erlangt haben. Darüber hinaus setzen wir die Lücke zwischen zwei Spalten mithilfe der Säule-Lack-Eigenschaft und setzen ihren Wert als “als“ fest25px”.

CSS:

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

Im nächsten Schritt verwenden wir “.Kind”Um sowohl das Div -Kinder -Div zuzugreifen als auch die Höhe von Divs als" festlegen "als" als "als" als "festlegen"250px"Und setzen Sie die Hintergrundfarbe als" als "RGB (253, 5, 109)”:

.Kind
Höhe: 250px;
Hintergrund: RGB (253, 5, 109);

Dies zeigt das folgende Ergebnis:

Gehen wir zu einer anderen Methode, um Div an Seite nebeneinander zu platzieren

Methode 2: Platzieren Sie zwei Divs nebeneinander in CSS mit Flex

Der "biegenIst der Wert der Anzeigeeigenschaft, mit der zwei Divs nebeneinander platziert werden können. Diese Eigenschaft wird verwendet, um eine flexible Länge für das flexible Artikel festzulegen. Es schrumpft oder wächst den Flex -Element, der in seinen Behälter passt.

Syntax

Die Syntax der Anzeigeeigenschaft mit Flex ist unten angegeben:

Anzeige: Flex;

Wechseln wir zum Beispiel, um das angegebene Konzept zu verstehen.

Beispiel

Wir werden die gleiche HTML -Datei betrachten und anwenden “biegen”In den übergeordneten Container. Hier setzen wir den Wert der Anzeigeeigenschaft als Flex und setzen die Lücke zwischen den Kinderdivs als “10px”:

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

Setzen Sie danach die Breite, Höhe und Hintergrundfarbe des DIV als "650px","200px", Und „RGB (0, 255, 42)", bzw:

.Kind
Breite: 650px;
Höhe: 200px;
Hintergrund: RGB (0, 255, 42);

Das Ergebnis des angegebenen Code ist unten angegeben:

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

Die CSS Float -Eigenschaft gibt die schwimmende Richtung eines Elements an. Insbesondere kann diese Eigenschaft verwendet werden, um zwei Divs nebeneinander in CSS zu platzieren.

Syntax

Die Syntax der Float -Eigenschaft lautet:

float: keine | links | rechts

Hier ist die Beschreibung für die oben gegebenen Werte:

• keiner: Es wird verwendet, um das schwimmende Einschränkung einzuschränken.
• links: Es wird verwendet, um Elemente auf der linken Seite zu schweben.
• Rechts: Es wird verwendet, um Elemente auf der rechten Seite zu schweben.

Lassen Sie uns zum Beispiel des Aufstellens von Div nebeneinander wechseln.

Beispiel

Jetzt werden wir zwei Divs im Tag erstellen und Klassennamen als "zuweisen"Div1" Und "Div2”:

Dann benutze ".Div1" Und ".Div2”Zu den im HTML -Abschnitt hinzugefügten Containern zugreifen. Wir werden beide Divs in derselben Klasse verwenden, da die Eigenschaften und Werte, die wir beiden zuweisen werden, gleich sind.

Als nächstes weisen wir den Wert der Float -Eigenschaft als “zu" zu "links"Und setzen Sie die Breite und Höhe des DIV als" als "50%" Und "40%”. Wir verwenden auch die Boxgrößeneigenschaft und setzen ihren Wert als "als"Grenzschachtel”. Stellen Sie außerdem die Hintergrundfarbe der DIV als “festRGB (7, 255, 222)"Und setzen Sie die Werte der Grenzeigenschaft als" als "3px","solide", Und "RGB (255, 0, 255)”:

.Div1, .div2
float: links;
Breite: 50%;
Höhe: 40%;
Kastengrößen: Border-Box;
Hintergrund: RGB (7, 255, 222);
Grenze: 3px fester RGB (255, 0, 255);

Notiz: Sie können zwei Divs nebeneinander platzieren, ohne die Eigenschaft für Kastengrößen und die Randeigenschaft zu verwenden, indem Sie die verschiedenen Hintergrundfarben der Divs festlegen.

Sobald Sie den oben genannten Code implementiert haben, führen Sie die HTML -Datei aus und sehen Sie das Ergebnis an:

Notiz: Um eine Lücke zwischen zwei Divs zu schaffen, erstellen Sie zuerst eine weitere DIV und stellen Sie dann den Rand des Divs entsprechend fest.

Abschluss

DIVs können nebeneinander platziert werden, indem drei verschiedene Methoden von CSS verwendet werden, nämlich die “biegen" Und "NetzWerte der Anzeigeeigenschaft und die “schweben" Eigentum. Jede der Methoden funktioniert effizient; Sie können jedoch eine von ihnen entsprechend unseren Anforderungen verwenden. In diesem Leitfaden haben wir drei Methoden erörtert, um Div an der Seite mit CSS zu platzieren und verwandte Beispiele bereitzustellen.