Bagaimanakah saya boleh Membuat Reka Letak Teks Dua Lajur secara Automatik dengan CSS?-tutorial css-php.cn

Bagaimanakah saya boleh Membuat Reka Letak Teks Dua Lajur secara Automatik dengan CSS?

Patricia Arquette

Lepaskan： 2024-11-28 12:03:11

asal

133 orang telah melayarinya

How can I Automatically Create Two-Column Text Layout with CSS?

Melimpah Teks ke Dua Lajur Secara Automatik Menggunakan CSS

Untuk mencipta reka letak teks yang mengalir lancar ke dalam dua lajur, pertimbangkan untuk memanfaatkan kuasa CSS . Tidak seperti kaedah tradisional menggunakan berbilang div, CSS menyediakan penyelesaian elegan yang mencapai hasil yang diinginkan tanpa memerlukan elemen HTML tambahan.

Penyelesaian terletak pada penggunaan kiraan lajur sifat CSS. Dengan menetapkan sifat ini kepada nilai 2, anda boleh membahagikan teks kepada dua lajur yang sama. Untuk meningkatkan daya tarikan estetik, anda juga boleh menentukan jurang lajur untuk menambah jarak antara lajur dan peraturan lajur untuk mencipta garis menegak yang memisahkannya.

Berikut ialah contoh bagaimana CSS akan kelihatan:

div.multi {
  column-count: 2;
  column-gap: 10px;
  column-rule: 1px solid black;      
}

Salin selepas log masuk

Dengan membungkus kandungan teks dalam

dengan berbilang kelas, CSS akan melimpahkan teks secara automatik ke dalam dua lajur, mencipta reka letak yang menarik secara visual yang menyerupai surat khabar.

Atas ialah kandungan terperinci Bagaimanakah saya boleh Membuat Reka Letak Teks Dua Lajur secara Automatik dengan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!