Heim > Artikel > Web-Frontend > Wie lege ich die Länge in CSS fest, um den Abstand zwischen Spalten festzulegen?

Wie lege ich die Länge in CSS fest, um den Abstand zwischen Spalten festzulegen?

王林nach vorne: 2023-09-04 11:45:021078Durchsuche

CSS ist ein leistungsstarkes Tool in der Webentwicklung, mit dem Entwickler mehrspaltige Layouts für Textinhalte auf Webseiten erstellen können. Spalten sind eine effektive Möglichkeit, lange Textblöcke in überschaubare Abschnitte aufzuteilen. Ein wichtiger Aspekt von CSS-Spalten sind die Lücken zwischen ihnen.

Verschiedene Möglichkeiten, den Spaltenabstand in CSS festzulegen

Hier sind einige der vielen Möglichkeiten, Lücken zwischen Spalten in CSS festzulegen.

1. Verwenden Sie das Spaltenlückenattribut

Die

column-gap-Eigenschaft ist die gebräuchlichste Methode zum Festlegen der Lücke zwischen Spalten. Diese Eigenschaft legt den Abstand zwischen den Spalten in einem mehrspaltigen Layout fest. Es handelt sich um eine Abkürzungseigenschaft, die die Eigenschaften „column-rule-width“ und „column-rule-style“ kombiniert. Zum Beispiel -

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

Um im obigen CSS-Code drei Spalten zu erstellen, setzen wir die Eigenschaft „column-count“ auf 3 und die Eigenschaft „column-gap“ auf 20 Pixel, um den Mittelabstand festzulegen.

Die chinesische Übersetzung von

Beispiel 1

lautet:

Beispiel 1

Festen Pixelwert für Spaltenlücken festlegen.

<!DOCTYPE html>
<html>
<head>
   <style>
      body{
         background-color: lightgray;
      }
      h2 {
         text-align:center;
      }
      .column-container {
         column-count: 3;
         column-gap: 20px;
         column-rule: 3px solid;
      }
   </style>
</head>
<body>
   <h2>Setting the column gap using the column-gap Property</h2>
   <div class="column-container">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut quam mauris. Donec euismod, velit eu gravida tempus, massa turpis venenatis velit, a lacinia tortor risus vel risus.</p>
      <p>Quisque elementum bibendum diam, vel ullamcorper justo laoreet quis. Nulla facilisi. In viverra porttitor dapibus. Vivamus gravida erat ac libero congue convallis.</p>
      <p>Quisque elementum bibendum diam, vel ullamcorper justo laoreet quis. Nulla facilisi. In viverra porttitor dapibus. Vivamus gravida erat ac libero congue convallis.</p>
   </div>
</body>
</html>

2. Lückenattribut verwenden

Die Gap-Eigenschaft ist eine neue CSS-Eigenschaft, die in CSS Grid eingeführt wurde. Wir können damit auch den Abstand zwischen Spalten festlegen. Dies ist ein Kurzattribut, das es Entwicklern ermöglicht, Zeilenlücken- und Spaltenlückenattribute miteinander zu kombinieren. Zum Beispiel -

.column-container {
   column-count: 4;
   gap: 15px;
}

Um im obigen CSS-Code vier Spalten zu erstellen, setzen wir die Eigenschaft „column-count“ auf 4 und die Eigenschaft „column-gap“ auf 15 Pixel, um den mittleren Abstand festzulegen.

Beispiel 2

Verwenden Sie das Lückenattribut, um einen festen Pixelwert für Spaltenlücken festzulegen.

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         background-color: lightgreen;
      }
      h2 {
         text-align: center;
      }
      .column-container {
         column-count: 4;
         gap: 15px;
         column-rule: 3px dotted;
      }
   </style>
</head>
<body>
   <body>
      <h2>Setting the column gap using the gap Property </h2>
      <div class="column-container">
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut quam mauris. Donec euismod, velit eu gravida tempus, massa turpis venenatis velit, a lacinia tortor risus vel risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut quam mauris. Donec euismod, velit eu gravida tempus, massa turpis venenatis velit, a lacinia tortor risus vel risus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
      </div>
   </body>
</body>
</html>

3. Verwendung von CSS-Variablen

CSS-Variablen sind benutzerdefinierte Eigenschaften, die eine flexible Möglichkeit bieten, Lücken zwischen Spalten in mehrspaltigen Layouts festzulegen. Es ermöglicht Entwicklern, wiederverwendbare Werte zu definieren. Zum Beispiel:

:root {
   --column-gap: 20px;
}
.column-container {
   column-count: 3;
   column-gap: var(--column-gap);
}

Im obigen CSS-Code haben wir eine CSS-Variable namens --column-gap definiert, ihren Wert auf 20 Pixel gesetzt und sie in der Funktion var() aufgerufen. Um drei Spalten zu erstellen, setzen wir die Eigenschaft „column-count“ auf 3.

Die chinesische Übersetzung von

Beispiel 3

lautet:

Beispiel 3

Verwenden Sie CSS-Variablen, um feste Pixelwerte für den Spaltenabstand festzulegen.

<!DOCTYPE html>
<html>
<head>
   <style>
      body{
         background-color: lightgray;
      }
      h2 {
         text-align:center;
      }
      .my-container {
         column-count: 3;
         column-gap: var(--column-gap);
         column-rule: 3px dotted;
      }
   </style>
</head>
<body>
   <h2>Setting the column gap using the CSS variable</h2>
   <div class="my-container"  style="--column-gap: 20px";>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut quam mauris. Donec euismod, velit eu gravida tempus, massa turpis venenatis velit, a lacinia tortor risus vel risus.</p>
      <p>Quisque elementum bibendum diam, vel ullamcorper justo laoreet quis. Nulla facilisi. In viverra porttitor dapibus. Vivamus gravida erat ac libero congue convallis.</p>
      <p>Quisque elementum bibendum diam, vel ullamcorper justo laoreet quis. Nulla facilisi. In viverra porttitor dapibus. Vivamus gravida erat ac libero congue convallis.</p>
   </div>
</body>
</html>

Fazit

Im obigen Artikel haben wir verschiedene Möglichkeiten zum Festlegen von Spaltenabständen zwischen Spalten besprochen, darunter das Column-Gap-Attribut, das Gap-Attribut und CSS-Variablen. Insgesamt ist das Setzen von Lücken zwischen Spalten in CSS eine nützliche Technik zum Organisieren von Webinhalten.

Das obige ist der detaillierte Inhalt vonWie lege ich die Länge in CSS fest, um den Abstand zwischen Spalten festzulegen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css count var column

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：CSS-WortumbrucheigenschaftNächster Artikel：CSS-Wortumbrucheigenschaft

In Verbindung stehende Artikel

Mehr sehen