CSS中如何設定長度來設定列之間的間隙？-css教學-PHP中文網

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

1. 使用 column-gap 屬性

Example 3

範例 3

Setting the column gap using the column-gap Property

2. 使用間隙屬性

Setting the column gap using the gap Property

3。使用 CSS 變數

Setting the column gap using the CSS variable

結論

首頁

web前端

css教學

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

王林

Sep 04, 2023 am 11:45 AM

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

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 id="Setting-the-column-gap-using-the-column-gap-Property">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 id="Setting-the-column-gap-using-the-gap-Property">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 id="Setting-the-column-gap-using-the-CSS-variable">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>

登入後複製