什么是 CSS 列?如何填充?

cssweb developmentfront end technology更新于 2024/5/21 6:36:17

我们可以使用各种 CSS 属性来管理网页的列，column-fill 就是其中之一。column-fill CSS 属性用于设置内容在多列中的显示方式。例如，内容应该自然流畅，还是在所有列之间保持平衡。

有时，我们需要在所有列中设置相同的内容，以提升应用程序的用户体验。

语法

用户可以按照以下语法使用 column-fill CSS 属性。

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

column-fill CSS 属性值

auto − 它将内容设置为自然流畅。例如，它会填充第一列，而只将内容发送到第二列。
Balance − 用于设置所有列的相同内容。
Initial − 设置默认值"balance"。
Inherit − 从父元素继承 column-fill 属性的值。

示例 1

在下面的示例中，我们定义了两个 div 元素并添加了文本内容。此外，我们还为这两个 div 元素设置了固定尺寸。之后，我们将列数设置为 2，并将 column-fill 设置为 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 属性来设置内容在多列之间的显示方式。建议使用 balance 值，将内容在高度为"auto"的列中均匀分布。这样我们就可以克服底部空间的问题。