Divs nebeneinander - CSS

In der Frontend-Entwicklung ist es oft notwendig, mehrere Elemente nebeneinander anzuordnen. Eine gängige Möglichkeit dies zu tun, ist die Verwendung von div-Elementen und CSS-Regeln.

HTML

Das Grundgerüst für das Anordnen von Elementen nebeneinander besteht aus div-Elementen, die jeweils die zu positionierenden Elemente umfassen.

<div class="container">
  <div class="box">Element 1</div>
  <div class="box">Element 2</div>
  <div class="box">Element 3</div>
</div>

CSS

Die div-Elemente müssen nun in CSS angesprochen und passend positioniert werden. Hierzu gibt es verschiedene Möglichkeiten:

float

Eine Möglichkeit ist die Verwendung von float, um die Elemente nebeneinander zu setzen:

.box {
  float: left;
}

Es ist wichtig, darauf zu achten, dass die Elemente eine feste Breite haben oder automatisch ihre Breite aus dem Inhalt ziehen (width: auto), da sie ansonsten nicht korrekt positioniert werden können.

display: inline-block

Eine weitere Möglichkeit ist die Verwendung von display: inline-block:

.box {
  display: inline-block;
}

Auch hier ist es wichtig, dass die Elemente eine feste Breite haben oder automatisch ihre Breite aus dem Inhalt ziehen (width: auto).

Flexbox

Die flexbox-Technologie ist eine sehr mächtige und flexible Möglichkeit, Elemente nebeneinander anzuordnen:

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.box {
  flex: 0 0 calc(33.33% - 10px);
  margin-bottom: 20px;
}

Zu beachten ist, dass die container-Definition der flexbox-Container ist. Die flexbox-Elemente werden innerhalb dieses Containers angeordnet. Mit flex-wrap: wrap; wird definiert, dass Elemente in eine neue Zeile umgebrochen werden sollen, wenn der Platz innerhalb des Containers nicht ausreicht.

justify-content: space-between; sorgt dafür, dass die Elemente gleichmäßig über die horizontale Achse verteilt werden.

In der .box-Klasse definieren wir die Breite der Boxen. Mit flex: 0 0 calc(33.33% - 10px); geben wir die Breite der Boxen an und mit margin-bottom: 20px; schaffen wir einen Abstand zwischen den Boxen.

Fazit

Das Erstellen von nebeneinander positionierten Elementen ist mit den gezeigten Möglichkeiten relativ einfach zu realisieren. Es ist jedoch wichtig, darauf zu achten, dass die Breite der Elemente definiert ist und sich gegebenenfalls an den Inhalt anpasst. Weiterhin gibt es noch viele weitere Möglichkeiten, die wir hier nicht behandelt haben, wie zum Beispiel CSS Grid oder die Verwendung von Tabellen.