Wie kann ich DIV-Elemente mithilfe von HTML und CSS nebeneinander ausrichten?

Align

Elemente nebeneinander

Bei der Suche, Elemente nebeneinander mit HTML und CSS auszurichten, ist float: left der berüchtigtste Ansatz, aber es ist nicht die einzige Methode.< /p>

Hier sind verschiedene Techniken zur Erzielung einer Parallelausrichtung aufgeführt, von den weit verbreiteten bis hin zu den moderneren innovativ.

---

Float

Float verwenden: links oder rechts ist eine Methode. Seien Sie jedoch vorsichtig, da dies Auswirkungen auf das Layout anderer Elemente haben kann.

HTML

<div><br> <div> < div class="float-left">B</div><br></div><br>

CSS

.float-left {<br> float : left;<br>}<br>

---

Inline-Anzeige

display : Inline-Block ermöglicht die Platzierung von Elementen nebeneinander, ohne das Layout zu beeinträchtigen, obwohl ein Leerzeichen dazwischen entstehen kann sie.

HTML

<div><br> <div> <div class="inline-block">B</div><br></div><br>

CSS

.inline-block {<br> display : inline-block;<br>}<br>

Um den Leerraum zwischen Inline-Block-Elementen zu beseitigen, entfernen Sie den Leerraum zwischen dem HTML Tags.

---

Flexbox

Flexbox kann mit seinen leistungsstarken Layoutfunktionen Elemente einfach ausrichten horizontal.

HTML

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

CSS

.flex-parent {<br> display: flex;<br>}<br>.flex- Kind {<br>flex: 1;<br>><br></p><p>Inline Flexbox ist nützlich, um Elemente innerhalb von Inline nebeneinander zu platzieren Inhalt.</p><p></p>
<hr><p>HTML<pre class="brush:php;toolbar:false"><div> <div>A</div><p> <div>B</div> </p></div><br>

CSS

.inline-flex-parent {<br> display: inline-flex;<br>}<br>

---

CSS Grid

CSS Grid bietet präzise Kontrolle über die Elementpositionierung.

HTML

<div > <div>A</div><br> <div>B</div><br></div><br>

CSS

.grid-parent {<br> display: grid;<br> Grid-Template-Spalten: 1fr 1fr;<br>}<br>

Das obige ist der detaillierte Inhalt vonWie kann ich DIV-Elemente mithilfe von HTML und CSS nebeneinander ausrichten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!