目錄
在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中如何設定長度來設定列之間的間隙?

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>
登入後複製

結論

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

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

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

<🎜>:泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系統,解釋
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆樹的耳語 - 如何解鎖抓鉤
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1666
14
CakePHP 教程
1425
52
Laravel 教程
1325
25
PHP教程
1273
29
C# 教程
1252
24
靜態表單提供商的比較 靜態表單提供商的比較 Apr 16, 2025 am 11:20 AM

讓我們嘗試在這裡造成一個術語:“靜態表單提供商”。你帶上html

使Sass更快的概念證明 使Sass更快的概念證明 Apr 16, 2025 am 10:38 AM

在一個新項目開始時,Sass彙編發生在眼睛的眨眼中。感覺很棒,尤其是當它與browsersync配對時,它重新加載

每周平台新聞:HTML加載屬性,主要的ARIA規格以及從iframe轉移到Shadow dom 每周平台新聞:HTML加載屬性,主要的ARIA規格以及從iframe轉移到Shadow dom Apr 17, 2025 am 10:55 AM

在本週的平台新聞綜述中,Chrome引入了一個用於加載的新屬性,Web開發人員的可訪問性規範以及BBC Move

與部分元素的交易 與部分元素的交易 Apr 12, 2025 am 11:39 AM

同一天發表了兩篇文章:

我們如何標記Google字體並創建Goofonts.com 我們如何標記Google字體並創建Goofonts.com Apr 12, 2025 pm 12:02 PM

Goofonts是由開發人員和設計師丈夫簽名的附帶項目,它們都是版式的忠實擁護者。我們一直在標記Google

帶有HTML對話框元素的一些動手 帶有HTML對話框元素的一些動手 Apr 16, 2025 am 11:33 AM

這是我第一次查看HTML元素。我已經意識到了一段時間,但是尚未將其旋轉。它很酷,

多腳步滑塊:一般案例 多腳步滑塊:一般案例 Apr 12, 2025 am 10:52 AM

這個兩部分系列的第一部分詳細介紹了我們如何獲得兩次跑步的滑塊。現在,我們&#039;

'訂閱播客”鏈接應在哪裡? '訂閱播客”鏈接應在哪裡? Apr 16, 2025 pm 12:04 PM

有一段時間,iTunes是播客中的大狗,因此,如果您將“訂閱播客”鏈接到喜歡:

See all articles