Rumah >hujung hadapan web >tutorial css >Jadikan Div boleh ditatal secara menegak menggunakan CSS
Jadikan Div boleh ditatal secara menegak menggunakan CSS
- PHPzke hadapan
- 2023-09-06 17:29:021359semak imbas
Kandungan yang ingin kami gunakan dalam laman web kami boleh menjadi besar dan mungkin mengambil banyak ruang, yang bermaksud elemen tapak web lain mungkin dialihkan, menjejaskan responsif tapak web. Untuk mengelakkan perkara ini daripada berlaku, anda perlu menyediakan pengguna dengan kandungan boleh ditatal supaya jika pengguna berminat, dia boleh menatal ke bawah untuk membaca keseluruhan kandungan.
Dalam artikel ini, kita akan melihat cara membuat tatal div secara menegak dan sifat yang akan kita gunakan untuk mencapai ini.
Bagaimana untuk membuat skrol div secara menegak?
Atribut limpahan boleh digunakan untuk membuat tatal DIV secara menegak kerana berbilang nilai boleh dimasukkan dalam atribut limpahan. Terdapat beberapa nilai seperti tersembunyi dan auto. Kita boleh mencipta bar skrol mendatar dan menegak berdasarkan nilai yang digunakan. Jika kita menggunakan nilai auto kita boleh mendapatkan bar skrol menegak. Mari kita lihat sintaks atribut limpahan:
Tatabahasa
overflow:hidden/visible/clip/scroll/auto/inherit;
Kami akan menggunakan paksi-x dan paksi-y dan menetapkan sifat paksi-x kepada tersembunyi dan sifat paksi-y kepada automatik, ini akan menyembunyikan bar skrol mendatar dan hanya menunjukkan bar skrol menegak dan kami akan secara automatik mendapat yang diperlukan div.
Contoh
Dalam contoh ini, kami akan mengisytiharkan div dan kemudian menulis perenggan di mana kami akan menambah atribut limpahan untuk membuat tatal div secara menegak.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of vertically scrollable div</title>
<style>
h2 {
color: Green;
}
.scrl {
padding: 3px;
color: white;
margin: 2px, 2px;
background-color: black;
height: 118px;
overflow-x: hidden;
color: white;
overflow-y: auto;
text-align: justify;
width: 489px;
}
</style>
</head>
<body>
<center>
<h2>Hi! This an example of the vertically scrollable div</h2>
<div class="scrl">This is an example of the vertically scrollable
div many beginner coders need the help of some articles or some sort of tutorials
to write there code. There are many instances in which the coder might need help
or can be stuck on a particular question. The community of coders is very huge
and is ready to help everyone at anywhere and at whatever time. The coding community
will help the coder to enhance his skills and his fluency in code. The coder can
choose a language to write his or her code depending on his interest as every
language has its own expertise and functions.
</div>
</center>
</body>
</html>
Dalam kod di atas, kami telah menggunakan atribut limpahan dan menukar paksi-xnya kepada tersembunyi dan paksi-y kepada kelihatan, yang memberikan kami bar boleh tatal menegak dalam perenggan yang kami tulis di sini. Mari kita lihat output yang kita dapat daripada melaksanakan kod.
Anda boleh melihat output di atas dan anda dapat melihat bahawa kami mempunyai bar boleh tatal menegak yang boleh digunakan untuk menatal ke bawah.
Nota - Apabila kita menggunakan atribut limpahan, kita perlu menentukan elemen "elemen blok", jika tidak, ia mungkin tidak berfungsi. Memandangkan sifat ini digunakan terutamanya untuk menggunting kandungan atau menambah bar boleh ditatal (sama ada secara menegak atau mendatar) kerana kandungan yang digunakan terlalu besar untuk dimuatkan dalam kawasan yang ditentukan.
Mari lihat contoh lain untuk memahami hartanah ini dengan lebih baik.
Contoh
Dalam contoh ini, bukannya menukar paksi-x dan paksi-y bagi harta tersebut, kami akan menetapkan nilai harta itu kepada auto untuk membuat tatal div secara menegak. Ini kodnya:
<!DOCTYPE html>
<html lang="en">
<head>
<title> Another Example of vertically scrollable div</title>
<style>
.scrlr {
margin: 4px;
padding: 4px;
color: white;
background-color: black;
width: 488px;
height: 118px;
margin: 4px;
text-align: justify;
overflow: auto;
width: 488px;
text-align: justify;
}
h2 {
color: Red;
}
</style>
</head>
<body>
<center>
<h2>Hi! This another example of the verticallly scrollable div</h2>
<div class="scrlr">This is an example of the vertically scrollable div
many beginner coders need the help of some articles or some sort of tutorials to
write there code. There are many instances in which the coder might need help or
can be stuck on a particular question. The community of coders is very huge and
is ready to help everyone at anywhere and at whatever time. The coding community
will help the coder to enhance his skills and his fluency in code. The coder can
choose a language to write his or her code depending on his interest as every
language has its own expertise and functions.
</div>
</center>
</body>
</html>
Dalam kod di atas, kami menukar nilai atribut limpahan daripada paksi-x tersembunyi dan paksi-y automatik kepada auto dan menggunakan contoh yang sama untuk melihat hasil keluaran kami. Mari kita lihat output yang akan dihasilkan oleh kod ini.
Anda boleh melihat output di atas dan anda dapat melihat bahawa walaupun dengan nilai auto pada sifat limpahan, kami masih mempunyai bar skrol.
Kesimpulan
Sifat limpahan digunakan secara meluas untuk klip kandungan apabila ia mengambil banyak ruang. Atau jika kita ingin menambah bar skrol untuk pengguna menatal ke bawah, sekali gus mengurangkan ruang keseluruhan yang diperlukan pada halaman web.
Dalam artikel ini, kami mempelajari cara menggunakan atribut limpahan dan cara menambahkan bar skrol menegak pada div dan banyak lagi tentang nilai yang digunakan dalam atribut limpahan.
Atas ialah kandungan terperinci Jadikan Div boleh ditatal secara menegak menggunakan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!