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.

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