Penjelasan terperinci tentang sifat lebar lajur CSS: lebar lajur dan kiraan lajur

Penjelasan terperinci tentang atribut lebar lajur CSS: lebar lajur dan kiraan lajur, contoh kod khusus diperlukan

Dalam reka bentuk web, kami selalunya perlu Bahagikan kandungan kepada lajur untuk menambah baik penyampaian maklumat. Sifat susun atur lajur dalam CSS memberikan kami penyelesaian yang fleksibel. Antaranya, lebar lajur dan kiraan lajur ialah dua atribut lebar lajur yang biasa digunakan. Artikel ini memperincikan penggunaan kedua-dua sifat ini dan menyediakan contoh kod yang sepadan.

1. Atribut lebar lajur

atribut lebar lajur digunakan untuk menetapkan lebar setiap lajur. Sintaksnya adalah seperti berikut:

div {
  column-width: value;
}

Antaranya, nilai boleh menjadi nilai lebar tertentu, seperti piksel (px), peratusan (%), automatik (auto), atau kata kunci seperti warisan, permulaan , dsb.

Contoh kod:

<div class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mattis est id sem consequat, sit amet lobortis arcu bibendum.</p>
  <p>Integer ut sapien nec lectus euismod interdum. Vestibulum efficitur est massa, nec accumsan eros cursus eget.</p>
  <p>Donec eleifend eros eget enim eleifend, ac sollicitudin libero aliquam. Suspendisse potenti. Aliquam eget placerat mi.</p>
</div>

<style>
.container {
  column-width: 200px;
}
</style>

Kod di atas membahagikan div bekas kepada tiga lajur, setiap lajur adalah 200px lebar. Jika bekas tidak cukup lebar untuk memuatkan tiga lajur, penyemak imbas akan secara automatik melaraskan lebar lajur agar muat dalam bekas.

2. atribut kiraan lajur

#🎜🎜 #atribut kiraan lajur digunakan untuk menetapkan bilangan lajur. Sintaksnya adalah seperti berikut:

div {
  column-count: value;
}

Antaranya, nilai mewakili bilangan lajur, yang boleh menjadi nombor tertentu atau kata kunci, seperti auto, warisan, permulaan, dll.

Contoh kod:

<div class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mattis est id sem consequat, sit amet lobortis arcu bibendum.</p>
  <p>Integer ut sapien nec lectus euismod interdum. Vestibulum efficitur est massa, nec accumsan eros cursus eget.</p>
  <p>Donec eleifend eros eget enim eleifend, ac sollicitudin libero aliquam. Suspendisse potenti. Aliquam eget placerat mi.</p>
</div>

<style>
.container {
  column-count: 2;
}
</style>

Kod di atas membahagikan div bekas kepada dua lajur Jika kandungan dalam bekas melebihi lebar yang boleh dimuatkan oleh dua lajur, penyemak imbas akan secara automatik membahagikan kandungan kepada dua lajur dibahagikan kepada lajur seterusnya.

3. Gabungan lebar lajur dan kiraan lajur

lebar lajur dan kiraan lajur boleh digunakan secara gabungan untuk mencapai reka letak lajur yang lebih kompleks. Apabila menggunakan atribut kiraan lajur, bilangan lajur diutamakan berbanding atribut lebar lajur dan penyemak imbas secara automatik akan mengira lebar lajur untuk mengisi bekas.

Contoh kod:

<div class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mattis est id sem consequat, sit amet lobortis arcu bibendum.</p>
  <p>Integer ut sapien nec lectus euismod interdum. Vestibulum efficitur est massa, nec accumsan eros cursus eget.</p>
  <p>Donec eleifend eros eget enim eleifend, ac sollicitudin libero aliquam. Suspendisse potenti. Aliquam eget placerat mi.</p>
</div>

<style>
.container {
  column-count: 3;
  column-width: 200px;
}
</style>

Kod di atas membahagikan div bekas kepada tiga lajur, setiap lajur adalah 200px lebar Jika lebar kontena tidak mencukupi untuk memuatkan tiga lajur penyemak imbas secara automatik akan melaraskan Lebar lajur agar muat dalam bekas.

Ringkasan:

Dalam reka bentuk web, menggunakan sifat lebar lajur dan kiraan lajur boleh mencapai kesan reka letak berbilang lajur dengan mudah. Dengan menetapkan lebar lajur dan bilangan lajur, anda boleh menjadikan kandungan halaman lebih teratur dan meningkatkan pengalaman pengguna. Contoh kod khusus disediakan di atas, dan pembaca boleh melaraskan dan menggunakannya mengikut keperluan sebenar. Okay, saya percaya bahawa melalui pengenalan artikel ini, semua orang mempunyai pemahaman yang lebih mendalam tentang sifat lebar lajur CSS. Datang dan cuba!

Atas ialah kandungan terperinci Penjelasan terperinci tentang sifat lebar lajur CSS: lebar lajur dan kiraan lajur. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!