Zwei Blöcke nebeneinander CSS

Zwei Blöcke nebeneinander CSS

Thematische Portale CSS-Portal • Portal für Webentwickler

Bei der Entwicklung von Webseiten tritt häufig die Aufgabe auf, mehrere Spalten mit unterschiedlichem Inhalt nebeneinander anzuordnen. Standardmäßig werden jedoch <div>-Elemente nacheinander untereinander angeordnet.

Fragen zu diesem Artikel oder andere Themen können auf der Diskussionsseite gestellt werden.

Erstellung von Blöcken in HTML

Zunächst müssen wir zwei <div>-Blöcke in unserem HTML erstellen:

<div class="container">
  <div id="block1">Text</div>
  <div id="block2">Text</div>
</div>

Anordnung von DIV-Blöcken nebeneinander

Um die Blöcke nebeneinander in einer Zeile zu platzieren, müssen wir in CSS für beide Elemente die folgenden Parameter definieren:

#block1 {
float: left;
display: block;
width: 300px;
border: 1px solid gray;
margin: 2px;
padding: 4px;
}

#block2 {
float: left;
display: block;
width: 300px;
border: 1px solid gray;
margin: 2px;
padding: 4px;
}

Das Ergebnis wird wie auf dem rechts gezeigten Bild dargestellt.

• float: Dieser Wert kann "left" oder "right" sein, was bedeutet, dass der Block an die entsprechende Seite ausgerichtet wird. Zum Beispiel kann der erste Block links und der zweite rechts positioniert werden, wodurch eine ordentliche Anordnung entsteht. Ein Beispiel finden Sie am Ende des Artikels im erstellten Template.
• display: block;: Zeigt das div-Element als Blockelement an.

Zusätzliche Einstellungen

Die übrigen Parameter sind dekorativer Natur:

• width: Definiert die Breite der Blöcke.
• border: Legt die Rahmen der Blöcke fest.
• margin: Externe Abstände, um die Blöcke voneinander zu trennen.

Zusätzliche Optionen für die Lösung

• Flexbox: Anstelle von float kann Flexbox verwendet werden, was die Verteilung der Elemente flexibler macht:

.container {
  display: flex;
}

#block1, #block2 {
  flex: 1;
  margin: 2px;
  border: 1px solid gray;
  padding: 10px;
  background: lightgray;
}

• Grid: Für komplexere Layouts kann CSS Grid verwendet werden:

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 4px;
}

#block1, #block2 {
  border: 1px solid blue;
}

Diese Methoden bieten modernere und flexiblere Ansätze für Layouts im Vergleich zur Verwendung von float. Das Aktualisieren Ihres Artikels mit diesen Informationen kann für Leser hilfreich sein, die nach modernen Layoutmethoden suchen.

Falls es Schwierigkeiten bei der CSS-Umsetzung gibt oder Fragen zu diesem Artikel bestehen, können diese auf der speziell dafür eingerichteten Diskussionsseite gestellt werden.

Weitere Artikel zu CSS

V

Enzyklopädie CSS

Portal Programmierung • CSS-Portal