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.
Hier sind einige der vielen Möglichkeiten, Lücken zwischen Spalten in CSS festzulegen.
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 vonFesten 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>
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.
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>
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 vonVerwenden 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>
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!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
