Rumah > Artikel > hujung hadapan web > Bagaimana untuk menyusun teks ke dalam berbilang lajur menggunakan CSS3?
Bagaimana untuk menyusun teks ke dalam berbilang lajur menggunakan CSS3?
- WBOYke hadapan
- 2023-08-23 13:29:021121semak imbas
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;
Di sini, “n” ialah integer positif, menunjukkan bilangan lajur yang kita mahu teks disusun.
Terjemahan bahasa Cina bagiContoh 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>
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>
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!