Bagaimanakah Saya Boleh Memastikan Div Ditatal ke Bawah Hanya Menggunakan CSS?

Pastikan Div Limpahan Ditatal ke Bawah: Penyelesaian CSS Sahaja

Pertimbangkan senario di mana anda mempunyai bekas div terhad kepada ketinggian tertentu dengan kandungan ditambah secara dinamik padanya. Anda ingin memastikan ia kekal ditatal ke bawah, kecuali apabila pengguna menatal ke atas secara manual. Bagaimanakah anda boleh mencapai ini tanpa menggunakan JavaScript?

Jawapannya terletak pada menggunakan sifat flex-direction: column-reverse dalam CSS anda. Teknik ini berkesan memperlakukan bahagian bawah div sebagai bahagian atas. Selagi penyemak imbas yang disasarkan menyokong flexbox, hasilnya ialah div yang secara automatik menatal ke bawah apabila kandungan baharu ditambahkan.

Untuk menggambarkan, berikut ialah contoh coretan kod HTML dan CSS:

CSS:

.container {
  height: 100px;
  overflow: auto;
  display: flex;
  flex-direction: column-reverse;
}

HTML:

<div class="container">
  <div>Bottom</div>
  <div>Hi</div>
  <div>Hi</div>
  <div>Hi</div>
  <div>Hi</div>
  <div>Top</div>
</div>

Dengan menetapkan sifat flex-direction ke column-reverse, susunan markup pada dasarnya diterbalikkan, memastikan kandungan muncul seolah-olah ia ditatal ke bawah. Kaedah ini membolehkan anda mencipta div yang kekal ditatal ke bawah melainkan pengguna menatal secara eksplisit ke atas, dengan elegan menangani pernyataan masalah awal.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memastikan Div Ditatal ke Bawah Hanya Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!