Apakah lajur CSS dan cara mengisinya?-tutorial css-php.cn

Apakah lajur CSS dan cara mengisinya?

PHPz

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

ke hadapan

1418 orang telah melayarinya

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

Kami boleh menggunakan pelbagai sifat CSS untuk mengurus lajur halaman web, "isi lajur" adalah salah satu daripadanya. Sifat CSS isi lajur digunakan untuk menetapkan penampilan kandungan dalam berbilang lajur. Sebagai contoh, ia harus mengalir atau mengimbangi secara semula jadi antara semua lajur.

Kadangkala, kami perlu menetapkan kandungan yang sama dalam semua lajur untuk meningkatkan pengalaman pengguna aplikasi.

Tatabahasa

Pengguna boleh menggunakan sifat CSS isi lajur mengikut sintaks berikut.

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

Salin selepas log masuk

Lajur isi nilai sifat CSS

auto - Ia menetapkan kandungan dalam aliran semula jadi. Sebagai contoh, ia mengisi lajur pertama dan hanya menghantar kandungan ke lajur kedua.
Baki - Digunakan untuk menetapkan kandungan yang sama dalam semua lajur.
Initial - Menetapkan nilai lalai, iaitu "Baki".
Diwarisi - Ia mewarisi nilai harta isian lajur daripada elemen induk.

Contoh 1

Dalam contoh di bawah, kami telah menentukan dua elemen div dan menambah kandungan teks. Selain itu, kami menetapkan dimensi tetap untuk kedua-dua elemen div. Selepas itu, kami menetapkan bilangan lajur kepada 2 dan padding lajur kepada auto.

Dalam output, kita dapat melihat bahawa ia mengisi lajur pertama dahulu dan kemudian hanya lajur kedua. Jika lajur pertama tidak diisi sepenuhnya, kandungan kekal dalam lajur pertama.

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

Salin selepas log masuk

Contoh 2

Dalam contoh di bawah, kami telah menentukan dua elemen div seperti yang pertama. Selepas itu, bilangan lajur elemen div pertama adalah sama dengan 4 dan bilangan lajur elemen div kedua adalah sama dengan 3.

Selain itu, kami juga menetapkan nilai "baki" untuk atribut "isi lajur" bagi kedua-dua elemen div. Dalam output, kita boleh melihat cara kandungan seimbang merentas berbilang lajur, malah mana-mana lajur yang tidak penuh mempunyai ruang di bahagian bawah.

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

Salin selepas log masuk

Pengguna belajar menggunakan sifat isian lajur CSS untuk menetapkan cara kandungan dipaparkan antara berbilang lajur. Adalah disyorkan untuk menggunakan nilai baki untuk membahagikan kandungan sama rata antara lajur ketinggian "auto". Dengan cara ini kita boleh mengatasi ruang bawah.

Atas ialah kandungan terperinci Apakah lajur CSS dan cara mengisinya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!