Bagaimana untuk menyusun teks ke dalam berbilang lajur menggunakan CSS3?-tutorial css-php.cn

Bagaimana untuk menyusun teks ke dalam berbilang lajur menggunakan CSS3?

WBOY

Lepaskan： 2023-08-23 13:29:02

ke hadapan

1205 orang telah melayarinya

Bagaimana untuk menyusun teks ke dalam berbilang lajur menggunakan CSS3?

Untuk membahagikan teks kepada berbilang lajur, kami menggunakan sifat "kiraan lajur" CSS3. Atribut ini digunakan untuk membahagikan kandungan elemen HTML kepada bilangan lajur yang ditentukan. Di sini kami akan menggunakan dua contoh berbeza untuk menunjukkan aplikasi sifat "kiraan lajur" CSS untuk menyusun teks dalam 2 dan 3 lajur.

Tatabahasa

column-count: n;

Salin selepas log masuk

Di sini, “n” ialah integer positif, menunjukkan bilangan lajur yang kita mahu teks disusun.

Terjemahan bahasa Cina bagi

Contoh 1

ialah:

Contoh 1

Dalam contoh ini, kami akan menggunakan sifat "column-count" CSS3 untuk membahagikan kandungan teg "p" kepada 3 lajur.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>How to arrange text in multi columns using CSS3?</title>
   <style>
      .para {
         column-count: 3;
      }
   </style>
</head>
<body>
   <h3>How to arrange text in multi columns using CSS3?</h3>
   <p class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil architecto ratione cumque consequatur at fugit saepe, unde temporibus laudantium, incidunt sit possimus quidem soluta facere repellat dolore facilis, consectetur repudiandae.</p>
</body>
</html>

Salin selepas log masuk

Terjemahan bahasa Cina bagi

Contoh 2

ialah:

Contoh 2

Dalam contoh ini, kami akan menggunakan sifat "column-count" CSS3 untuk membahagikan kandungan teg "p" kepada dua lajur.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>How to arrange text in multi columns using CSS3?</title>
   <style>
      .para {
         column-count: 2;
      }
   </style>
</head>
<body>
   <h3>How to arrange text in multi columns using CSS3?</h3>
   <p class="para">
      <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil architecto ratione cumque consequatur at fugit saepe, unde temporibus laudantium, incidunt sit possimus quidem soluta facere repellat dolore facilis, consectetur repudiandae.</span>
      <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil architecto ratione cumque consequatur at fugit saepe, unde temporibus laudantium, incidunt sit possimus quidem soluta facere repellat dolore facilis, consectetur repudiandae.</span>
      <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil architecto ratione cumque consequatur at fugit saepe, unde temporibus laudantium, incidunt sit possimus quidem soluta facere repellat dolore facilis, consectetur repudiandae.</span>
   </p>
</body>
</html>

Salin selepas log masuk

Kesimpulan

Dalam artikel ini, kami mempelajari sifat "bilangan lajur" dan cara menyusun teks ke dalam berbilang lajur menggunakan CSS3. Dalam contoh pertama kita menyusun teks menjadi 3 lajur dengan menetapkan sifat "kiraan lajur" kepada 3 dan dalam contoh kedua kita menyusun teks dengan menetapkan sifat "kiraan lajur" kepada 2 kepada 3 lajur.

Atas ialah kandungan terperinci Bagaimana untuk menyusun teks ke dalam berbilang lajur menggunakan CSS3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!