Rumah > Artikel > hujung hadapan web > Jadikan Div boleh ditatal secara menegak menggunakan CSS

Jadikan Div boleh ditatal secara menegak menggunakan CSS

PHPzke hadapan: 2023-09-06 17:29:021310semak imbas

使用 CSS 使 Div 可垂直滚动

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!

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Bagaimana untuk menjajarkan imej secara menegak dalam bahagian yang menjangkau seluruh halaman web?Artikel seterusnya：Bagaimana untuk menjajarkan imej secara menegak dalam bahagian yang menjangkau seluruh halaman web?

Artikel berkaitan

Lihat lagi