Top 5 Möglichkeiten, zwei Divs nebeneinander mit CSS anzuzeigen - TechBoxWeb

Blog

Top 5 Möglichkeiten, zwei Divs nebeneinander mit CSS anzuzeigen - TechBoxWeb

In HTML gibt es zwei Arten von Element-Inline- und Block-Elementen. Inline-Elemente können Elemente nebeneinander platzieren, aber sie unterstützen standardmäßig die Eigenschaft height und width nicht und Blockelemente unterstützen standardmäßig die Eigenschaft width und height, aber wir können dies nicht platziere Blockelemente wie zwei div nebeneinander

Hier können wir also sehen, wie wir es zum Laufen bringen können

Wir werden sehen, wie div auf 5 verschiedene Arten nebeneinander platziert werden können

  • Anzeige: Inline-Block (traditionell)
  • CSS-Flexbox-Methode
  • CSS-Grid-Methode
  • Anzeige: Tabellenmethode
  • Float-Eigenschaft

[mc4wp_form-ID=314]

Anzeige verwenden: Inline-Block

Anzeige: Inline-Block Eigenschaft hilft, Blockelemente nebeneinander zu platzieren

Aber wir müssen dem Blockelement eine zusätzliche Breiteneigenschaft hinzufügen, da das Blockelement standardmäßig 100% Breite nimmt

z.B.

// CSS-Datei

.element { display: inline-block; width: 100px; height: 100px; background: #ce8888; }

und die Ausgabe wird sein

Bitte überprüfen Sie das Beispiel Hier

ksx männliche Verbesserungspillen

Flexbox verwenden

Flexbox ist eine moderne Art, das Layout von Webseiten und Flexbox zu gestalten ist keine einzelne Eigenschaft ihr komplettes Modul sie hat eine Reihe von Funktionen

mal sehen, wie wir divs mit flexbox nebeneinander ausrichten können

//html-Datei

// CSS-Datei

.container { display: flex; } .item { background: #ce8888; flex-basis: 100px; height: 100px; margin: 5px; }

//Ausgang

Anzeige: Flex dem Container gegebene Eigenschaft, die ein untergeordnetes Element im Flex-Kontext macht und divs nebeneinander ausrichtet

Im obigen Beispiel können Sie sehen, dass wir die Eigenschaft flex-basis verwendet haben, die verwendet wird, um die Mindestbreite für das Element anzugeben. Um Flexbox im Detail zu verstehen, bitte schau dir das an

Bitte finden Sie eine Demo Hier

CSS-Raster verwenden

CSS-Raster ist ein weiterer großartiger Ansatz zum Design von Webseiten und sein komplettes Modul, das mit einer Reihe von Funktionen ausgestattet ist

Mal sehen, wie wir Divs mit CSS-Raster nebeneinander anzeigen können

//html

So finden Sie die Benutzer-ID und das Passwort von Verizon
Grid Example

//css-Datei

.container { display: grid; grid-template-columns: 100px 100px; grid-template-rows: 100px; grid-column-gap: 5px; } .item { background: #ce8888; }

und die Ausgabe wird sein

Eigentum Anzeige: Raster schaltet die Rasterlayoutstruktur ein

In CSS-Datei, grid-template-columns-Eigenschaft hilft, die Seite in die Anzahl der Spalten, wir haben zweimal 100px angegeben, dann werden zwei Spalten erstellt

Es ist ein sehr großes Modul, ich denke, Sie sollten Hör zu zuerst im Detail, dann nur zur Nutzung.

eine Klasse aus einer anderen Python-Datei importieren

Demo finden Hier

Verwenden der Anzeigetabelle

Anzeige: Tabelleneigenschaft ist eine Alternative für

Schild

Mal sehen, wie wir die Anzeige von div nebeneinander erreichen können, indem wir Anzeige: Tabelle Eigentum

//html-Datei

//css-Datei

.container { display: table; width: 20%; } .table-row { display: table-row; height: 100px; } .table-cell { border: 1px solid; background: #ce8888; display: table-cell; padding: 2px; }

und die Ausgabe wird sein

Bitte finden Sie eine Demo Hier

Sie können das obige Display codieren: Tabellenbeispiel mit HTML Tisch markiere auch wie unten

//html-Datei

//css-Datei

.container { display: table; width: 20%; } .table-row { display: table-row; height: 100px; } .table-cell { border: 1px solid; background: #ce8888; display: table-cell; padding: 2px; }

und die Ausgabe wird sein

Float-Eigenschaft verwenden

Die float Die CSS-Eigenschaft platziert ein Element auf der linken oder rechten Seite seines Containers, sodass Text- und Inline-Elemente um ihn herum fließen können. Das Element wird aus dem normalen Fluss der Seite entfernt, bleibt aber immer noch ein Teil des Flusses

mal sehen, wie wir div mit float nebeneinander anzeigen können

//html-Datei

//css-Datei

.element { float: left; width: 100px; height: 100px; background: #ce8888; margin: 5px }

und die Ausgabe wird sein

Bitte finden Sie eine Demo Hier

Abschluss:

Es gibt verschiedene Möglichkeiten, Divs nebeneinander auszurichten, aber die Frage ist, welche besser ist

Es hängt ganz von der Anforderung ab

Flexbox und CSS Grid sind moderne Möglichkeiten, das Layout für Webseiten zu erstellen, und es ist ein komplettes Modul und kommt mit einer Reihe von Funktionen. Ich empfehle Flexbox oder CSS Grid, wenn die gesamte Seite gestaltet werden muss

gitlab-Erweiterung für Visual Studio

Wenn Sie nur minimale Anforderungen haben, zeigen Sie an: Inline-Block ist die perfekte Option.

Dieser Beitrag wurde erstmals veröffentlicht am TechBoxWeb

#css #html5

techboxweb.com

Top 5 Möglichkeiten, zwei Divs nebeneinander mit CSS anzuzeigen - TechBoxWeb

Es ist immer schwer zu finden, welche Methode am besten ist, um Divs nebeneinander anzuzeigen. Hier sind die 5 besten Möglichkeiten, Divs nebeneinander anzuzeigen