使用 CSS3 設定列間距

要設定網頁上的列間隙，請使用 column-gap 屬性。可以將值設定為 −

column-gap: length|normal|initial|inherit;

值可以是 −

  • 長度 − 列之間的間隙

  • normal − 列之間有一個正常間隙

列之間的間隙

要設定列之間的間隙，我們設定了一個長度單位，即 −

column-gap: 25px;

示例

我們來看一個在列之間設定間隙的示例 −

<!DOCTYPE html>
<html>
<head>
   <style>
      .demo {
         column-count: 4;
         -webkit-column-count: 4; /* Chrome, Safari, Opera */
         -moz-column-count: 4; /* Firefox */
         -webkit-column-gap: 25px; /* Chrome, Safari, Opera */
         -moz-column-gap: 25px; /* Firefox */
         column-gap: 25px;
      }
   </style>
</head>
<body>
   <h1>Machine Learning</h1>
   <div class="demo">
      Today’s Artificial Intelligence (AI) has far surpassed the hype of blockchain and quantum computing. 
      This is due to the fact that huge computing resources are easily available to the common man. 
      The developers now take advantage of this in creating new Machine Learning models and to re-train 
      the existing models for better performance and results. The easy availability of High Performance 
      Computing (HPC) has resulted in a sudden increased demand for IT professionals having Machine Learning skills.
   </div>
</body>
</html>

列之間有一個正常間隙

要設定正常間隙，請使用 column-gap 屬性並將其設定為 normal −

column-gap: normal;

示例

下面我們來看一個設定正常間隙的示例 −

<!DOCTYPE html>
<html>
<head>
   <style>
      .demo {
         column-count: 2;
         -webkit-column-count: 2; /* Chrome, Safari, Opera */
         -moz-column-count: 2; /* Firefox */
         -webkit-column-gap: normal; /* Chrome, Safari, Opera */
         -moz-column-gap: normal; /* Firefox */
         column-gap: normal;
      }
   </style>
</head>
<body>
   <h1>Machine Learning</h1>
   <div class="demo">
      Today’s Artificial Intelligence (AI) has far surpassed the hype of blockchain and quantum computing. This is due to the fact that huge computing resources are easily available to the common man. The developers now take advantage of this in creating new Machine Learning models and to re-train the existing models for better performance and results. The easy availability of High Performance Computing (HPC) has resulted in a sudden increased demand for IT professionals having Machine Learning skills.
   </div>
</body>
</html>

網格中列之間的間隔

要設定網格中列之間的間隙，請使用 column-gap 屬性。使用 display 屬性和值 grid 建立網格佈局 −

#container {
   display: grid;
   border: 2px dashed blue;
   background-color: red;
   column-gap: 20px;
   grid-template-columns: repeat(4,1fr);
}

示例

我們來看一個示例 −

<!DOCTYPE html>
<html>
<head>
   <style>
      #container {
         display: grid;
         border: 2px dashed blue;
         background-color: red;
         column-gap: 20px;
         grid-template-columns: repeat(4,1fr);
      }
      #container > div {
         border: 2px dotted green;
         padding: 25px;
         background-color: blue;
         color: white;
      }
   </style>
</head>
<body>
   <h1>Demo Heading</h1>
   <div id="container">
      <div>A</div>
      <div>B</div>
      <div>C</div>  
      <div>D</div>
      <div>E</div>
      <div>F</div>
      <div>G</div>  
      <div>H</div>
   </div>
</body>
</html>

flexbox 容器中列之間的間隙

要在彈性佈局容器中設定各列之間的間距，使用具有 flex- 值的 display 屬性

#container {
   display: flex;
   flex-wrap: wrap;
   border: 2px dashed blue;
   background-color: red;
   column-gap: 40px;
}

示例

讓我們看一個示例 −

<!DOCTYPE html>
<html>
<head>
   <style>
      #container {
         display: flex;
         flex-wrap: wrap;
         border: 2px dashed blue;
         background-color: red;
         column-gap: 40px;
      }
      #container > div {
         width: 12%;
         border: 2px dotted green;
         padding: 25px;
         background-color: blue;
         color: white;
      }
   </style>
</head>
<body>
   <h1>Demo Heading</h1>
   <div id="container">
      <div>A</div>
      <div>B</div>
      <div>C</div>  
      <div>D</div>
      <div>E</div>
      <div>F</div>
      <div>G</div>  
      <div>H</div>
   </div>
</body>
</html>

更新日期： 27-12-2023

114 次瀏覽

開啟您的 職業生涯

完成課程，獲得認證

開始學習
廣告