首頁 > 文章 > web前端 > CSS中如何設定長度來設定列之間的間隙？

CSS中如何設定長度來設定列之間的間隙？

王林轉載: 2023-09-04 11:45:021081瀏覽

CSS 是 Web 開發中的強大工具，它允許開發人員為網頁上的文字內容建立多列佈局。分欄是將長文本區塊分解為更易於管理的區塊的有效方法。 CSS 列的一個重要方面是它們之間的間隙。

在CSS中設定列間距的不同方法

下面是在 CSS 中設定列之間間隙的多種方法中的某些方法。

1. 使用 column-gap 屬性

column-gap 屬性是設定列之間間隙最常見的方法。此屬性設定多列佈局中列之間的間距。它是一個簡寫屬性，結合了column-rule-width 和column-rule-style 屬性。例如 -

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

在上面的CSS程式碼中，為了建立三列，我們將column-count屬性設為3，並將column-gap屬性設為20像素以設定中心間隙。

Example 1

的中文翻譯為：

範例 1

為列間隙設定固定像素值。

<!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. 使用間隙屬性

gap屬性是一種新的CSS屬性，它在CSS Grid中引入。我們也可以使用它來設定列之間的間隔。這是一個縮寫屬性，允許開發人員將row-gap和column-gap屬性組合在一起。例如 -

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

在上面的CSS程式碼中，為了建立四列，我們將column-count屬性設為4，並將column-gap屬性設為15像素以設定中間間隙。

範例 2

使用間隙屬性設定列間隙的固定像素值。

<!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。使用 CSS 變數

CSS變數是自訂屬性，為多列佈局中設定列之間間隙提供了一種靈活的方式。它允許開發人員定義可重複使用的值。例如：

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

在上面的 CSS 程式碼中，我們定義了一個名為 --column-gap 的 CSS 變量，並將其值設為 20 像素，並在 var() 函數中呼叫它。為了建立三列，我們將 column-count 屬性設為 3。

Example 3

的中文翻譯為：

範例 3

使用CSS變數為列間距設定固定像素值。

<!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>

結論

在上面的文章中，我們討論了幾種設定列之間列間隙的方法，包括column-gap屬性、gap屬性和CSS變數。總的來說，在 CSS 中設定列之間的間隙是組織網頁內容的有用技術。

以上是CSS中如何設定長度來設定列之間的間隙？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

css count var column

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：CSS 自動換行屬性下一篇：CSS 自動換行屬性

看更多