In diesem Artikel werden wir jeden der genannten Ansätze einzeln besprechen und ein geeignetes Beispiel für jede Methode liefern.
Also lasst uns anfangen!
Methode 1: Platzieren Sie zwei Divs nebeneinander in CSS mithilfe von Grid
Das CSS „ Netz ”-Layout ermöglicht es dem Benutzer, zwei oder mehr zwei Divs nebeneinander zu platzieren. Grundsätzlich ist das Raster ein Wert der Anzeigeeigenschaft, die verwendet wird, um ein Layout zu erstellen, das aus Zeilen und Spalten besteht.
Syntax
Die Syntax der Anzeigeeigenschaft mit Rasterlayout ist unten angegeben:
Anzeige: Raster
Schauen wir uns nun ein Beispiel an, das sich auf das Platzieren von zwei Divs nebeneinander in CSS unter Verwendung des Rasterlayouts bezieht.
Beispiel
Hier erstellen wir zwei untergeordnete Divs innerhalb des übergeordneten Divs mit den Klassennamen „ Elternteil “, „ Kind ' und ' Kind “:
< div Klasse = 'Elternteil' >< div Klasse = 'Kind' >< / div >
< div Klasse = 'Kind' >< / div >
< / div >
Verwenden Sie als Nächstes im CSS-Abschnitt „ .Elternteil “, um auf das übergeordnete div zuzugreifen und den Wert der Anzeigeeigenschaft als „ Netz “. Stellen Sie als Nächstes den Bruch mit dem „ Grid-Template-Spalten ”-Eigenschaft, um Platz für Spalten zu schaffen. In unserem Fall setzen wir Brüche als „ 1fr ' und ' 1fr “, was bedeutet, dass beide Divs den gleichen Platz eingenommen haben. Darüber hinaus werden wir die Lücke zwischen zwei Spalten mithilfe der Eigenschaft column-gap festlegen und ihren Wert auf „ 25px “.
CSS:
.Elternteil {Anzeige : Netz ;
Grid-Template-Spalten : 1fr 1fr ;
Spaltenlücke : 25px ;
}
Im nächsten Schritt verwenden wir „ .Kind “, um auf beide untergeordneten divs zuzugreifen und die Höhe der divs als „ 250px “ und stellen Sie die Hintergrundfarbe auf „ RGB(253, 5, 109) “:
.Kind {Höhe : 250px ;
Hintergrund : rgb ( 253 , 5 , 109 ) ;
}
Dies zeigt das folgende Ergebnis:
Lassen Sie uns zu einer anderen Methode übergehen, um div nebeneinander zu platzieren
Methode 2: Platzieren Sie zwei Divs nebeneinander in CSS mit flex
Das ' biegen ” ist der Wert der display-Eigenschaft, die es ermöglicht, zwei divs nebeneinander zu platzieren. Diese Eigenschaft wird verwendet, um eine flexible Länge für das flexible Element festzulegen. Es schrumpft oder vergrößert das Flex-Element, damit es in seinen Container passt.
Syntax
Die Syntax der Anzeigeeigenschaft mit Flex ist unten angegeben:
Anzeige: Flex;Kommen wir zum Beispiel, um das genannte Konzept zu verstehen.
Beispiel
Wir betrachten dieselbe HTML-Datei und wenden „ biegen ” zum übergeordneten Container. Hier setzen wir den Wert der Anzeigeeigenschaft auf flex und die Lücke zwischen den untergeordneten Divs auf „ 10px “:
.Elternteil {Anzeige : biegen ;
Lücke : 10px ;
}
Legen Sie danach die Breite, Höhe und Hintergrundfarbe des div als „ 650px “, „ 200px ', und „rgb(0, 255, 42) ', beziehungsweise:
.Kind {Breite : 650px ;
Höhe : 200px ;
Hintergrund : rgb ( 0 , 255 , 42 ) ;
}
Das Ergebnis des angegebenen Codes ist unten angegeben:
Methode 3: Platzieren Sie zwei Divs nebeneinander in CSS mit Float
Die CSS-Eigenschaft float gibt die Gleitrichtung eines Elements an. Genauer gesagt kann diese Eigenschaft zum Platzieren von zwei divs nebeneinander in CSS verwendet werden.
Syntax
Die Syntax der Float-Eigenschaft lautet:
float: keine|links|rechtsHier ist die Beschreibung für die oben angegebenen Werte:
- keiner: Es wird verwendet, um das Schwimmen einzuschränken.
- links: Es wird verwendet, um Elemente auf der linken Seite schweben zu lassen.
- Rechts: Es wird verwendet, um Elemente auf der rechten Seite schweben zu lassen.
Kommen wir zu dem Beispiel, wie div nebeneinander platziert werden.
Beispiel
Jetzt erstellen wir zwei divs innerhalb des
-Tags und weisen den Klassennamen als „ div1 ' und ' div2 “: < Karosserie >< div Klasse = 'div1' >< / div >
< div Klasse = 'div2' >< / div >
< / Karosserie >
Dann benutze ' .div1 ' und ' .div2 “, um auf die im HTML-Abschnitt hinzugefügten Container zuzugreifen. 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 „ links “ und setze die Breite und Höhe des div als „ fünfzig% ' und ' 40% “. Wir verwenden auch die Box-Sizing-Eigenschaft und setzen ihren Wert auf „ Border-Box “. Legen Sie außerdem die Hintergrundfarbe des div als „ RGB(7, 255, 222) “ und setzen Sie die Werte der Border-Eigenschaft als „ 3px “, „ fest ', und ' RGB(255, 0, 255) “:
.div1 , .div2 {schweben : links ;
Breite : fünfzig% ;
Höhe : 40% ;
Box-Größe : Border-Box ;
Hintergrund : rgb ( 7 , 255 , 222 ) ;
Grenze : 3px fest rgb ( 255 , 0 , 255 ) ;
}
Notiz: Sie können zwei Divs nebeneinander platzieren, ohne die Box-Sizing-Eigenschaft und die Border-Eigenschaft zu verwenden, indem Sie die unterschiedlichen Hintergrundfarben der Divs festlegen.
Sobald Sie den obigen Code implementiert haben, führen Sie die HTML-Datei aus und sehen Sie sich das Ergebnis an:
Notiz: Um eine Lücke zwischen zwei Divs zu erstellen, erstellen Sie zuerst ein weiteres Div und legen Sie dann den Rand des Div entsprechend fest.
Fazit
Divs können nebeneinander platziert werden, indem drei verschiedene CSS-Methoden verwendet werden, nämlich „ biegen ' und ' Netz ” Werte der Anzeigeeigenschaft und die “ schweben ' Eigentum. Jede der Methoden arbeitet effizient; Sie können jedoch jeden von ihnen gemäß unseren Anforderungen verwenden. In diesem Handbuch haben wir drei Methoden zum Platzieren von div-Elementen nebeneinander mithilfe von CSS besprochen und entsprechende Beispiele bereitgestellt.