首頁 >web前端 >css教學 >什麼是 CSS 列以及如何填滿它？

什麼是 CSS 列以及如何填滿它？

PHPz轉載: 2023-08-30 15:49:101408瀏覽

什么是 CSS 列以及如何填充它？

我們可以使用各種 CSS 屬性來管理網頁的列，而「column-fill」就是其中之一。 column-fill CSS 屬性用於設定內容在多列中的外觀。例如，它應該在所有列之間自然流動或平衡。

有時，我們需要在所有欄位中設定相同的內容，以改善應用程式的使用者體驗。

文法

使用者可以按照以下語法來使用column-fill CSS屬性。

column-fill: auto | balance | initial | inherit;

列填入 CSS 屬性值

auto - 它設定自然流中的內容。例如，它填入第一列，僅將內容傳送到第二列。
Balance - 用於在所有欄位中設定相同的內容。
Initial - 設定預設值，即「餘額」。
繼承 - 它從父元素繼承列填滿屬性的值。

範例 1

在下面的範例中，我們定義了兩個 div 元素並新增了文字內容。此外，我們還為兩個 div 元素設定了固定尺寸。之後，我們將列數設為 2，將列填入設為 auto。

在輸出中，我們可以觀察到它首先填入第一列，然後只填入第二列。如果第一列未完全填充，則內容保留在第一列。

<html>
<head>
   <style>
      div {
         background-color: red;
         padding: 20px;
         font-size: 1.3rem;
         margin: 20px;
      }
      .javascript {
         column-count: 1;
         column-fill: auto;
         column-gap: 20px;
         column-rule: 1px solid #000;
      }
      .svelte {
         column-count: 2;
         column-fill: auto;
         column-gap: 20px;
         column-rule: 3px dotted blue;
      }
   </style>
</head>
<body>
   <h3> Using the <i> column-fill CSS property </i> to set the content in columns </h3>
   <div class = "javascript">
      JavaScript is a popular programming language used for both front-end and back-end development. It is known for its versatility, allowing developers to create dynamic and interactive websites and applications.
   </div>
   <div class = "svelte">
      Svelte is a web application framework that allows developers to build highly performant and reactive user interfaces. It is designed to optimize the code and minimize the amount of code sent to the browser, resulting in faster load times and better user experience.
      Svelte uses a reactive approach to building user interfaces, meaning that changes in data are automatically reflected in the user interface without needing to write additional code. This can significantly reduce development time and make the code easier to maintain.
   </div>
</body>
</html>

範例 2

在下面的範例中，我們像第一個一樣定義了兩個 div 元素。之後，第一個 div 元素的列數等於 4，第二個 div 元素的列數等於 3。

此外，我們也為兩個 div 元素的「column-fill」屬性設定了「balance」值。在輸出中，我們可以看到多列之間的內容如何平衡，甚至任何未滿的列底部都有空間。

<html>
<head>
   <style>
      div {
         width: 600px;
         height: 200px;
         background-color: green;
         padding: 20px;
         font-size: 1.3rem;
         margin: 20px;
         color: white;
      }
      .python {
         column-count: 4;
         column-fill: balance;
         column-gap: 20px;
         column-rule: 1px solid red;
      }
      .react {
         column-count: 3;
         column-fill: balance;
         column-gap: 20px;
         column-rule: 3px dotted blue;
      }
   </style>
</head>
<body>
   <h3> Using the <i> column-fill CSS property </i> to set the content in columns </h3>
   <div class = "python">
      Python is a versatile programming language widely used for web development, data analysis, machine learning, and
      scientific computing. It has a simple and easy-to-learn syntax, making it a popular choice for beginners.
   </div>
   <div class = "react">
      React is a JavaScript library used for building user interfaces. It allows developers to create reusable UI
      components and efficiently update the DOM as the application state changes. React is widely used for building
      single-page applications and mobile applications.
   </div>
</body>
</html>

使用者學會了使用CSS的column-fill屬性來設定內容在多列之間的顯示方式。建議使用平衡值在「自動」高度的欄位中平均劃分內容。這樣我們就可以克服底部空間。

以上是什麼是 CSS 列以及如何填滿它？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

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

上一篇：為什麼 CSS 可以使用假元素？下一篇：為什麼 CSS 可以使用假元素？

看更多