Was ist eine CSS-Spalte und wie wird sie gefüllt?-CSS-Tutorial-php.cn

Was ist eine CSS-Spalte und wie wird sie gefüllt?

PHPz

Freigeben： 2023-08-30 15:49:10

nach vorne

1417 Leute haben es durchsucht

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

Wir können verschiedene CSS-Eigenschaften verwenden, um die Spalten von Webseiten zu verwalten, „Spaltenfüllung“ ist eine davon. Die CSS-Eigenschaft „Spaltenfüllung“ wird verwendet, um die Darstellung von Inhalten in mehreren Spalten festzulegen. Beispielsweise sollte es zwischen allen Säulen auf natürliche Weise fließen oder sich ausbalancieren.

Manchmal müssen wir in allen Spalten denselben Inhalt festlegen, um die Benutzererfahrung der Anwendung zu verbessern.

Grammatik

Benutzer können die CSS-Eigenschaft zum Füllen von Spalten gemäß der folgenden Syntax verwenden.

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

Nach dem Login kopieren

CSS-Eigenschaftswerte zum Füllen von Spalten

auto – Es bringt den Inhalt in den natürlichen Fluss. Es füllt beispielsweise die erste Spalte und sendet den Inhalt nur an die zweite Spalte.
Balance – Wird verwendet, um in allen Spalten den gleichen Inhalt festzulegen.
Initial – Legt den Standardwert fest, nämlich „Balance“.
Inherited – Es erbt den Wert der Spaltenfüllungseigenschaft vom übergeordneten Element.

Beispiel 1

Im folgenden Beispiel haben wir zwei div-Elemente definiert und Textinhalt hinzugefügt. Zusätzlich legen wir feste Abmessungen für beide div-Elemente fest. Danach stellen wir die Anzahl der Spalten auf 2 und die Spaltenauffüllung auf „Auto“ ein.

In der Ausgabe können wir beobachten, dass zuerst die erste Spalte und dann nur die zweite Spalte gefüllt wird. Sollte die erste Spalte nicht vollständig gefüllt sein, verbleibt der Inhalt in der ersten Spalte.

<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>

Nach dem Login kopieren

Beispiel 2

Im folgenden Beispiel haben wir zwei div-Elemente wie das erste definiert. Danach beträgt die Anzahl der Spalten des ersten div-Elements 4 und die Anzahl der Spalten des zweiten div-Elements 3.

Darüber hinaus legen wir auch den „Balance“-Wert für das „column-fill“-Attribut beider div-Elemente fest. In der Ausgabe können wir sehen, wie der Inhalt auf mehrere Spalten verteilt ist und selbst alle Spalten, die nicht voll sind, unten Platz haben.

<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>

Nach dem Login kopieren

Benutzer haben gelernt, mit der CSS-Eigenschaft „column-fill“ festzulegen, wie Inhalte zwischen mehreren Spalten angezeigt werden. Es wird empfohlen, Balance-Werte zu verwenden, um den Inhalt gleichmäßig auf Spalten mit „Auto“-Höhe aufzuteilen. Auf diese Weise können wir den unteren Raum überwinden.

Das obige ist der detaillierte Inhalt vonWas ist eine CSS-Spalte und wie wird sie gefüllt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!