Informationen zu den zugehörigen Eigenschaften von Spalten im mehrspaltigen Layout in CSS3

CSS3 hat das -Attribut hinzugefügt, das ein mehrspaltiges Layout implementieren kann

Die vorherige Implementierung war sehr mühsam und erforderte möglicherweise verschiedene Positionierungen
Jetzt benötigen wir nur noch ein Attribut Sie können ein
Mehrspaltiges Layout ähnlich unserem Zeitungslayout erreichen
Dies kann für die Leser praktisch sein

Mehrere Spaltenanzahl und Mehrspaltenbreite

Wenn eine Zeile von Der Text ist zu lang. Möglicherweise haben Sie keine Lust, so weiterzulesen

kann angeben, was Sie möchten. Die Anzahl der Spalten

<p class="demo">......</p>

Der Browser stellt die entsprechende Spaltenbreite selbst ein

.demo {    width: 600px;    height: 200px;    border: 1px solid black;}

---

Sie können auch verwenden Spaltenbreite, um die Spaltenbreite festzulegen, ohne die Anzahl der Spalten anzugebenEs entspricht dem obigen Code

.demo {    width: 600px;    height: 200px;    border: 1px solid black;    column-count: 3; /*增*/}

Wenn der von Ihnen festgelegte Breitenwert nicht ausreicht, um das gesamte Element zu füllen

, dann versucht der Browser, die größte Breite zu verwenden, um sicherzustellen, dass die Anzahl der Spalten das gesamte Element ausfüllt Wenn beispielsweise die oben genannten 11em in 10em geändert werden, zeigt der Browser auch ein 3-Spalten-Layout an

---

Abgekürzte mehrspaltige Syntax

column-count und columns-width können zu einem zusammengesetzten Attribut columns kombiniert werden

Sie können dieses Attribut verwenden, um die Spaltenbreite, die Anzahl der Spalten oder beides festzulegen

.demo {    width: 600px;    height: 200px;    border: 1px solid black;    column-width: 11em; /*改*/}

Aber für den allgemeinen Gebrauch kann das Festlegen eines der Attribute unsere Anforderungen erfüllen

Spaltenintervallbreite

Im mehrspaltigen Layout gibt es eine Lücke zwischen den Spalten

Die Die Standardlücke ist 1em.

Wir können die Spaltenlücke über das Column-Gap-Attribut steuern.

Beachten Sie, dass der Text überläuft, wenn Sie den Spaltenabstand zu groß einstellen sollte mit der entsprechenden Anzahl von Spalten gesteuert werden

.demo {    width: 600px;    height: 200px;    border: 1px solid black;    columns: 3;    /*或者columns: 11em;*/
    /*或者columns: 11em 3;*/}

Elemente, die die Spalten umfassen

Ich habe dem Text ein Titelelement hinzugefügt und unterhalb der Höhe

.demo {    width: 600px;    height: 200px;    border: 1px solid black;    columns: 3;    column-gap: 2em; /*增*/}

geändert

Standardmäßig belegt das h1-Element nur die erste Spalte

Wenn ich möchte, dass es über mehreren Spalten liegt, wie mache ich das?

Stile für h1-Elemente festlegen

<p class="demo"><h1>Angel Beats</h1>......</p>

.demo {    width: 600px;    height: 280px;/*改*/
    border: 1px solid black;    columns: 3;}

column-span kann die Anzahl der Spalten angeben, die das Element umfasst. Der Standardattributwert ist 1
Auf „Alle“ setzen, damit sich Elemente über alle Spalten erstrecken können

---

Spaltenabstandsstil

Wenn Sie der Meinung sind, dass nur Leerzeichen zwischen Spalten zu langweilig sind

h1 {    column-span: all; <--
    text-align: center;}

Wir können die Spaltenregel verwenden Heaping Spaltenabstandseinstellung „Regel“

Dieses Attribut ist ein zusammengesetztes Attribut mit den folgenden Unterattributen:

column-rule-width

column- Rule-style

column-rule-color
ähnelt in gewisser Weise der Art und Weise, wie wir das Rahmenattribut
• < festlegen 🎜>

• Auf diese Weise wird eine 1 Pixel breite schwarze durchgezogene Linie zwischen den Spalten verwendet
  Column-rule-width verfügt neben der Einstellung von Pixeln auch über drei Schlüsselwörter : dünn, mittel, dick, um drei Breiten festzulegen
column-rule-style-Attributwert hat die folgenden Schlüsselwörter

.demo {    width: 600px;    height: 200px;    border: 1px solid black;    columns: 3;    column-rule: 1px solid black;}

keine Keine

versteckt Ausblenden

gepunktet gepunktet

• gestrichelte gestrichelte Linie

• durchgezogene durchgezogene Linie

• doppelte Doppellinie

• Groove 3D-Rillenregeln definieren

• Rippe 3D-Rillenregeln definieren

• in

  Satz
3D-Einsatzregeln definieren
Anfang 3D-Anfangsregeln definieren
Der letzte vier davon Der Effekt hängt von den Breiten- und Farbwerten ab. Lassen Sie uns zunächst verstehen,

• Das mehrspaltige Layout von CS3 wird weniger verwendetaber wir müssen immer noch die grundlegendsten Attribute kennen

Das obige ist der detaillierte Inhalt vonInformationen zu den zugehörigen Eigenschaften von Spalten im mehrspaltigen Layout in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!