Align
Elemente nebeneinander

Viele Möglichkeiten, es zu tun, Vorsicht float: left…

Es gibt viele Möglichkeiten, es auszurichten Elemente nebeneinander. Nachfolgend finden Sie die gängigsten Methoden, um zwei Elemente nebeneinander zu erreichen …

Demo: Alle folgenden Beispiele auf Codepen anzeigen/bearbeiten

Grundlegende Stile für alle Beispiele Unten…

Einige grundlegende CSS-Stile für übergeordnete und untergeordnete Elemente in diesen Beispielen:

.parent {<br> Hintergrund: mittelviolett;<br> Polsterung: 1rem;<br>}<br>.child {<br> Rand: 1px einfarbiges Indigo;<br> Polsterung: 1rem;<br>}<br>

Float verwenden : links mit Vorsicht

Die Verwendung der Float-Lösung kann unbeabsichtigte Auswirkungen auf andere Elemente haben. (Hinweis: Möglicherweise müssen Sie einen Clearfix verwenden.)

html

<div> <div-Klasse ='child float-left-child'>A</div><br> <div></div><br>

css

 float: left;<br>}<br>

Using display: inline-block is unkompliziert

html

<div> <div class='child inline-block-child'>A&lt ;/div><br> <div></div><br>

css

 Anzeige: inline-block;<br>}<br>

display: inline-block und Entfernen des Leerzeichens zwischen divs

Hinweis: der Abstand dazwischen Zwei untergeordnete Elemente können entfernt werden, indem das Leerzeichen zwischen den div-Tags entfernt wird:

html

<div> <div class='child inline-block-child'>A</div><div class='child inline-block-child'>B</div><br></div><br>

css

 Anzeige: inline-block;<br>}<br>

display: Flex ist gut choice

html

<div> <div class='child flex-child'>A</ div><br> <div></div><br>

css

 display: flex;<br>}<br>.flex-child { <br> Flex: 1;<br>}<br>

display: inline-flex ähnelt display: flex, aber inline

html

<div> <div class='child'>A</div><br> <div></div><br>

css

 Anzeige: inline-flex;<br>}<br>

Mit display: grid können Sie die Feinabstimmung vornehmen layout

html

<div> <div class='child'>A</div><br> <div></div><br>

css

 display: Grid;<br> Raster -Vorlagenspalten: 1 Fr 1fr<br>}<br>

Das obige ist der detaillierte Inhalt vonWie richtet man Div-Elemente in HTML und CSS nebeneinander aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!