CSS zwei Divs nebeneinander
Methoden zum Platzieren von zwei Divs nebeneinander
In CSS stehen fünf verschiedene Methoden zur Verfügung, um die beiden Divs nebeneinander zu platzieren:
- Anzeige: Inline-Block-Methode
- Anzeige: Tabellenmethode
- CSS Float -Methode
- CSS Flexbox -Methode
- CSS -Gittermethode
Beispiel 1: Verwenden der Anzeige: Inline-Block-Methode
Wir starten unseren HTML -Code, indem wir eine neue Datei im Visual Studio -Code öffnen und dann die HTML -Sprache auswählen. Die Datei wird hier erstellt. Wir setzen das "!Markieren Sie, um die grundlegenden Tags zu erhalten. Wenn wir also "Eingabetaste" drücken, werden alle grundlegenden Tags von HTML in der Datei angezeigt.
Wir beginnen unsere Kodierung vom Körperteil aus. Wir platzieren einen Übergang und zwei verschiedene Divs hier. Wir platzieren diese beiden Divs nebeneinander mit der Eigenschaft „Anzeige: Inline-Block“ in CSS. In dieser HTML -Datei verknüpfen wir auch die CSS -Datei vor dem Körper und im "Kopf". Gehen Sie nun in die CSS -Datei und sehen Sie sich an, wie wir diese Eigenschaft verwenden, um diese beiden Divs nebeneinander zu platzieren.
Nachdem wir den Div -Namen erwähnt haben, öffnen wir die lockigen Klammern. In diesen lockigen Zahnspangen verwenden wir die Eigenschaft "Anzeige" von CSS. Wir müssen die "Inline-Block" als Wert dieser "Anzeige" -Sache platzieren. Diese Eigenschaft „Display: Inline-Block“ hilft uns, zwei Divs nacheinander zu platzieren. Diese Eigenschaft „Display: Inline-Block“ bietet nicht die „Höhe“ und „Breite“. Wir müssen also die separaten Eigenschaften für die Festlegung der „Höhe“ und „Breite“ erwähnen. Wir setzen die Breite beider Divs mithilfe der Eigenschaft „Breite“ und setzen sie auf „150px“ ein. Wir setzen die Höhe beider Divs auf "100px". Der „Hintergrund“ dieser beiden Divs ist „Pink“. Die „Grenze“, die wir hier für beide Divs erstellen, ist „2px“ in Breite, „lila“ in Farbe und im „festen“ Typ. Während wir einen Text in diese Divs schreiben, setzen wir den Text mit der Eigenschaft "Text-Align" auf die „Zentrum“ der DIV. Wir haben auch die "Schriftgröße" auf "24px" und die "Schriftfamilie" auf "Algerian" festgelegt.
In der Ausgabe werden beide Divs nebeneinander platziert, da wir die Methode „Anzeige: Inline-Block“ für diese Divs verwendet haben. Beide DIVs werden hier nacheinander zurückgelegt.
Beispiel Nr. 2: Verwenden der Anzeige: Tabellenmethode
In diesem Beispiel haben wir eine Überschrift und erstellen zwei Divs mit dem Namen „Tabellenzell“ innerhalb der Hauptdivi. Wir verwenden die Anzeige: Tabelleneigenschaft in CSS, um beide Divs nebeneinander zu rendern.
Wir beginnen mit dem Styling der Überschrift. Das „Schriftart“, das wir hier für die Überschrift verwenden, ist „kursiv“. Die „Farbe“, die wir hier für die Überschrift verwenden, ist "Maroon". Und die "Schriftfamilie", die wir verwenden, ist "algerisch". Dann haben wir die "Container" -Klasse von Div. Wir verwenden hier die Eigenschaft "Anzeige: Tabelle", sodass beide Divs nebeneinander angezeigt werden. Wir setzen die „Breite“ auf „40%“. Dann verwenden wir für die „Tabellenreihe“ die Eigenschaft "Anzeige" erneut, aber hier setzen wir die "Tabellenreihe" als Wert und seine "Höhe" auf "130px" eingestellt, die auf "130px" eingestellt sind.
Dann bewegen wir uns zum „Tischzell“ -Div und setzen hier einige Eigenschaften für diese beiden Divs. Wir schaffen eine Grenze für beide DIVs, indem wir das „Grenz“ -Sturm nutzen. Dieser Rand ist für seine Breite, für seinen Typ und „Maroon“ für seine Farbe auf „2px“ eingestellt. Danach setzen wir seinen „Hintergrund“, um diese Divs attraktiv zu machen und für diese Eigenschaft eine „leichte Lachsfarbe“ zu verwenden. Wir setzen auch das "Display" hier als "Tabellenzell". Die „Polsterung“, die wir hier verwenden, ist "2PX". Außerdem haben wir einige Text in den Divs. Wir wenden hier ein gewisses Styling auf den Text. Die "Schriftfamilie" des Textes ist "algerisch" und ihre "Schriftgröße" lautet "25px". Wir richten diese Texte auf das „Zentrum“ aus.
Während wir die Methode „Anzeige: Tabelle“ für diese Divs angewendet haben, erscheinen sie nebeneinander im Ausgang. Beide Divs werden nebeneinander gerendert.
Beispiel Nr. 3: Verwenden der Float -Methode
Hier, nach der Überschrift. Wir erstellen einen DIV mit dem Namen "ST-Box" und dem anderen Div mit dem Namen "ND-Box". Wir setzen auch die Absätze in jedes Div mit Ausnahme des Hauptdiv. Wir werden die CSS Float -Eigenschaft verwenden, um beide Divs nebeneinander zu setzen.
Wir setzen die "Breite" und "Höhe" des "Container" Div, indem wir die Werte "400px" bzw. "190px" platzieren. Die "Hintergrundfarbe" des Behälters ist "grün". Das "Padding-Top" ist "20px" und die "Padding-Links" und "Polster-Rechts" sind beide auf "15px" eingestellt. Jetzt setzen wir die ST-Box-Div und verwenden die Eigenschaft "Float". Hier setzen wir es auf "links".
Die "Breite" und "Höhe" sind "180px" bzw. "160px". Die „Hintergrundfarbe“ dieser „ST-Box“ -D-Div ist „weiß“ mit einem Rand der „schwarzen“ Farbe in „festem“ Typ. Die „Schriftgröße“ für den Absatz, den wir in diesem Div geschrieben haben, ist "18px". Die "ND-Box" Div-Eigenschaften sind die gleichen wie die "ST-Box" -D-Div, die wir hier bereits erklärt haben. Die einzige neue Eigenschaft, die wir hier hinzufügen, ist die Eigenschaft „Margin-Links“ und wir setzen sie auf "20px". Wir stylen auch die Überschrift ein wenig, indem wir seine „Farbe“ in „grün“ ändern. Das "Times New Roman" wird hier als "Schriftfamilie" ausgewählt.
Sie können in diesem Screenshot sehen, dass die beiden Divs hier nebeneinander im Hauptdiv auftreten. Wir haben die Eigenschaft „Float“ in diesem Beispiel verwendet, um beide Divs nacheinander zu platzieren.
Beispiel Nr. 4: Verwenden der FlexBox -Methode
Wir haben eine Hauptdiv als „Flex-Container“, die zwei separate Divs enthält. Mit Ausnahme der Hauptdiv haben wir einige Absätze in jede DIV eingefügt. Beide Divs werden in diesem Beispiel neben der CSS Flexbox -Methode nebeneinander platziert.
Wir richten die Überschrift in der „Mitte“ aus und setzen die „Schriftfamilie“ auf „algerisch“,. Wir erwähnen die „Flex-Container“ und setzen die Eigenschaft "Display: Flex" in sich. Wir setzen diese Eigenschaft in den Container, damit die Eigenschaft „Flex“ das untergeordnete Element in einen Flex -Kontext stellt und die Divs nebeneinander ausrichtet. Für das „Flex-Kind“ setzen wir "Flex" und geben „1“ als Wert an. Wir erstellen den Rand um jede Div. Wir haben den Absatz "Schriftgröße" des Absatzes festgelegt, der innerhalb der Divs auf "20px" geschrieben ist. Das „Randrecht“ des „Flex-Child: First-Child“ wird hier auf "20px" eingestellt.
Diese Divs erscheinen nebeneinander im Ausgang, da wir in diesem Beispiel die Eigenschaft „Flexbox“ verwendet haben. Beide Divs werden nebeneinander gezeigt.
Abschluss
Wir haben diesen Leitfaden erstellt, um die CSS -Eigenschaften zu verstehen, die dazu beitragen, zwei Divs nebeneinander zu setzen. Dieser Leitfaden hat dieses Thema ausführlich durchlaufen. Wir haben die Methoden durchlaufen, die zum Platzieren von zwei Divs nebeneinander in CSS verwendet werden. Wir erklärten, dass es fünf Eigenschaften gibt, um zwei Divs nebeneinander zu platzieren. Wir haben vier verschiedene Fälle übergegangen. Ich hoffe.