Erstellung eines Zwei-Spalten-Komponents für Webinhalte

By /
Erstellung eines Zwei-Spalten-Komponents für Webinhalte

In diesem Artikel beschreibe ich die Erstellung eines Zwei-Spalten-Komponents, der sich ideal zur Darstellung von Textinhalten in einer klaren und geordneten Weise eignet. Der Zwei-Spalten-Komponent ist eine einfache, aber effektive Methode, um Inhalte nebeneinander zu präsentieren und die Lesbarkeit zu erhöhen.

Komponente ausprobieren
Den Quellcode erhalten

Einführung

Ein Zwei-Spalten-Komponent ist besonders nützlich, wenn Inhalte miteinander verglichen oder komplementäre Informationen nebeneinander dargestellt werden sollen. Durch die Trennung in zwei Spalten wird der Inhalt übersichtlicher und benutzerfreundlicher.

Der HTML-Code

Hier ist der HTML-Code für den Zwei-Spalten-Komponent:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2 Column Component</title>
    <style>
        /* Zwei-Spalten-Textkomponente */
        .two-column-text {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin: 40px 0;
            padding: 20px;
            background-color: #f9f9f9;
            border-radius: 10px;
        }

        .left-column,
        .right-column {
            flex: 1;
            margin: 0 20px;
            padding: 20px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body>
    <section class="two-column-text">
        <div class="left-column">
            <h2>Linke Spalte Titel</h2>
            <p>
                Dies ist der Inhalt der linken Spalte. Hier können Sie beliebigen Text platzieren, einschließlich Absätzen, Listen oder anderen Textinformationen.
            </p>
        </div>
        <div class="right-column">
            <h2>Rechte Spalte Titel</h2>
            <p>
                Dies ist der Inhalt der rechten Spalte. Ebenso können Sie hier Inhalte einfügen, die den Inhalt der linken Spalte ergänzen.
            </p>
        </div>
    </section>
</body>
</html>

Erklärung des Codes

  • Container-Element: Der <section>-Tag mit der Klasse two-column-text dient als Container für die beiden Spalten.
  • Styling: Das CSS verwendet display: flex, um die Spalten nebeneinander auszurichten. Eigenschaften wie padding, margin und border-radius tragen zur optischen Attraktivität bei.
  • Spaltenstruktur: Jede Spalte wird mit einer eigenen Klasse (left-column und right-column) versehen, um einheitliches Styling zu ermöglichen.

Related Posts

Scroll to Top