Webentwickler und Designer stehen häufig vor einer Situation, in der Spalten in eine neue Zeile verschoben werden müssen. Dies kann beispielsweise nützlich sein, wenn Sie ein responsives Layout erstellen oder einfach das Aussehen Ihrer Website verbessern möchten. In diesem Artikel werden wir uns einige der besten Möglichkeiten ansehen, wie dies mit HTML und CSS geschehen kann.
Eine der einfachsten Möglichkeiten, Spalten in eine neue Zeile zu verschieben, besteht darin, die CSS-Eigenschaft zu verwenden float. Sie können einen Wert für eine Spalte festlegen left und der andere - right. Dadurch werden die Spalten an den Seiten des Blocks ausgerichtet und in eine neue Zeile «gesprungen».
Es ist jedoch eine Überlegung wert, dass die Verwendung float kann zu einigen Problemen führen, z. B. wenn andere Elemente beginnen, sich auf die übertragenen Lautsprecher zu «stürzen». In diesem Fall wird empfohlen, die CSS-Eigenschaft zu verwenden clear, um die korrekte Anzeigereihenfolge der Elemente auf der Seite festzulegen.
Eine andere Möglichkeit, Spalten zu migrieren, besteht darin, die CSS-Eigenschaft zu verwenden display: inline-block. Sie können diese Einstellung für Ihre Spalten festlegen und diese werden automatisch in eine neue Zeile verschoben, wenn das Ende des Containers erreicht ist. Es ist jedoch eine Überlegung wert, dass diese Eigenschaft zwischen den Elementen kleine Einrückungen hinzufügt, sodass Sie möglicherweise einige Stile hinzufügen müssen, um die Abstände zu steuern.
Schließlich können Sie die Methode zum Übertragen von Spalten mithilfe von Medienabfragen verwenden. Mit Medienabfragen können Sie verschiedene Stile für verschiedene Geräte wie Mobiltelefone, Tablets oder Desktops festlegen. Sie können die Breite und den Stil Ihrer Spalten für unterschiedliche Bildschirmauflösungen festlegen, so dass sie automatisch in eine neue Zeile springen, wenn der Benutzer die Größe des Browserfensters ändert.
Pflege der Säulen für eine neue Reihe: Die Hyigenese der besten Praktiken
- Verwenden der CSS-Eigenschaft float: left/right
Wenn Sie diese Eigenschaft verwenden, können Sie die Spalten horizontal ausrichten und sie bei Bedarf in eine neue Zeile verschieben. Ein Beispiel:
.column
.column
.container .column
.container
Wählen Sie abhängig von Ihrem Projekt und Ihren Layoutanforderungen eine geeignete Methode aus. Berücksichtigen Sie die Browserunterstützung und den Ressourcenverbrauch, wenn Sie auswählen, wie Spalten in eine neue Zeile verschoben werden sollen.
Manuelles Migrieren mit CSS
Wenn Sie die Spalten manuell mit CSS in eine neue Zeile verschieben möchten, können Sie die Float-Eigenschaft verwenden. Die Quintessenz besteht darin, für jede Spalte einen float: left-Wert festzulegen, damit sie horizontal ausgerichtet sind. Dann müssen Sie dem Element hinzufügen, nach dem die Silbentrennung erfolgen soll, die CSS-Regel ist clear: both . Dadurch wird festgelegt, dass der Inhalt mit einer neuen Zeile beginnen muss.
Die Verwendung von Float ist jedoch in einigen Situationen möglicherweise nicht immer bequem und möglich. Zum Beispiel, wenn Sie die Reihenfolge der Lautsprecher für mobile Geräte beibehalten möchten. In diesem Fall ist es besser, andere Migrationsmethoden zu verwenden, die in den anderen Abschnitten dieses Artikels beschrieben werden.
Verwenden von Medienabfragen in CSS zum Migrieren von Spalten
Mithilfe von Medienabfragen können Sie bestimmte Stile auf Elemente anwenden, abhängig von den Eigenschaften des Geräts, auf dem die Webseite geöffnet wird. Sie können beispielsweise eine Medienabfrage definieren, die Stile nur auf Geräte mit einer maximalen Bildschirmbreite von weniger als 600 Pixeln anwenden soll. Dadurch können Sie ansprechende Designs erstellen, die auf verschiedenen Geräten, einschließlich Mobiltelefonen und Tablets, optimal angezeigt werden.
Sie können die CSS-Eigenschaft flex-wrap verwenden, um Spalten mithilfe von Medienabfragen in eine neue Zeile zu verschieben. Wenn Sie den Wrap-Wert für diese Eigenschaft festlegen, können Sie die Elemente bei Bedarf auch in eine neue Zeile umbrechen.
Angenommen, wir haben einen Container mit der Klasse "columns", der mehrere Spalten mit Flexbox platziert. Um Spalten in eine neue Zeile zu verschieben, wenn die Bildschirmbreite einen bestimmten Wert erreicht, können Sie den folgenden Code hinzufügen:
.columns
Wenn nun die Breite des Bildschirms den Wert erreicht, bei dem die Medienabfrage aktiviert wird, werden die Spalten automatisch in eine neue Zeile verschoben, um eine optimale Anzeige beizubehalten.
Die Verwendung von Medienabfragen in CSS, um Spalten in eine neue Zeile zu verschieben, ist eine bequeme und effektive Möglichkeit, ansprechende Designs zu erstellen. Mit diesen Techniken können Sie sicherstellen, dass Webseiten auf verschiedenen Geräten optimal dargestellt werden und benutzerfreundlich sind.
