CSS-Eigenschaften für mehrspaltiges Layout: Spaltenanzahl und Spaltenabstand-CSS-Tutorial-php.cn

CSS-Eigenschaften für mehrspaltiges Layout: Spaltenanzahl und Spaltenabstand

PHPz

Freigeben： 2023-10-28 08:35:33

Original

1658 Leute haben es durchsucht

CSS 多列布局属性：column-count 和 column-gap

CSS-Eigenschaften für mehrspaltiges Layout: Spaltenanzahl und Spaltenabstand, spezifische Codebeispiele sind erforderlich

In der Frontend-Entwicklung ist die Implementierung eines mehrspaltigen Layouts eine sehr häufige Anforderung. In CSS gibt es zwei Eigenschaften, die uns bei der einfachen Implementierung eines mehrspaltigen Layouts helfen können: Column-Count und Column-Gap.

column-count-Attribut

column-count-Attribut wird verwendet, um anzugeben, in wie viele Spalten der Inhalt eines Elements zur Anzeige unterteilt wird. Es akzeptiert einen positiven ganzzahligen Wert, der angibt, in wie viele Spalten der Inhalt unterteilt werden soll. Es ist erwähnenswert, dass der Browser uns automatisch dabei hilft, die Anzahl der Spalten zu berechnen und anzuordnen, wenn das Attribut „column-count“ festgelegt ist.

Hier ist ein Beispiel:

HTML-Code:

<div class="columns">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Morbi sit amet urna leo. Suspendisse potenti.</p>
  <p>Nunc dapibus vitae libero a tristique. Donec vitae commodo sem, eu tristique erat.</p>
  <p>Fusce tristique lorem sed ipsum consectetur, nec laoreet dui euismod.</p>
  <p>Maecenas eget sem id ex feugiat placerat. Sed nec enim placerat, tristique diam in, sollicitudin sapien.</p>
</div>

Nach dem Login kopieren

CSS-Code:

.columns {
  column-count: 3;
}

Nach dem Login kopieren

Der obige Code unterteilt den im

-Element eingeschlossenen Absatztext zur Anzeige in drei Spalten. Der Browser ordnet den Inhalt automatisch entsprechend der Länge und Anzahl der Spalten an, um eine mehrspaltige Anzeige zu erreichen.

column-gap-Attribut

column-gap-Attribut wird verwendet, um den Abstand zwischen Spalten anzugeben. Es akzeptiert einen Längenwert, der den Abstand zwischen den Spalten darstellt. Wir können Pixelwerte, Prozentsätze oder Schlüsselwörter verwenden, um den entsprechenden Abstand festzulegen.

Das Folgende ist ein Beispiel:

HTML-Code:

<div class="columns">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Morbi sit amet urna leo. Suspendisse potenti.</p>
  <p>Nunc dapibus vitae libero a tristique. Donec vitae commodo sem, eu tristique erat.</p>
  <p>Fusce tristique lorem sed ipsum consectetur, nec laoreet dui euismod.</p>
  <p>Maecenas eget sem id ex feugiat placerat. Sed nec enim placerat, tristique diam in, sollicitudin sapien.</p>
</div>

Nach dem Login kopieren

CSS-Code:

.columns {
  column-count: 3;
  column-gap: 20px;
}

Nach dem Login kopieren

Der obige Code unterteilt den im

-Element eingeschlossenen Absatztext zur Anzeige in drei Spalten, und es wird eine Zeile angezeigt zwischen jeder Spalte 20 Pixel Abstand.

Zusammenfassung:

Durch die Verwendung der Attribute „Spaltenanzahl“ und „Spaltenabstand“ können wir problemlos ein mehrspaltiges Layout implementieren. Column-Count wird verwendet, um anzugeben, in wie viele Spalten der Inhalt unterteilt wird, und Column-Gap wird verwendet, um den Abstand zwischen Spalten anzugeben. Diese beiden Attribute können uns schnell dabei helfen, mehrspaltige Layouteffekte zu erzielen und eine gute Steuerbarkeit zu gewährleisten.

Das Obige ist eine Einführung in die CSS-Eigenschaften „column-count“ und „column-gap“ für mehrspaltige Layouts. Jeder ist herzlich eingeladen, diese Attribute in tatsächlichen Projekten zu verwenden, um bessere Layouteffekte zu erzielen.

Das obige ist der detaillierte Inhalt vonCSS-Eigenschaften für mehrspaltiges Layout: Spaltenanzahl und Spaltenabstand. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten：

column-count css多列布局 column-gap

Quelle：php.cn

Vorheriger Artikel：Analyse der CSS-Breitenattribute: maximale Breite und minimale Breite Nächster Artikel：Tipps zur Optimierung von CSS-Attributen für klare Stile: Zurücksetzen und Normalisieren

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors