- masyarakat
- Belajar
- Perpustakaan Alatan
- Masa lapang
Rumah > Soal Jawab > teks badan
Menggunakan tailwindcss saya mempunyai html berikut
<ol class="relative columns-1 sm:columns-3">
<li>
<img src="https://placehold.co/400x300">id=voluptas minus a qui tempore
</li>
<li>...</li>
...
</ol>
ol css Tailwind berkaitan ialah
.sm:columns-3 {
columns: 3;
}
Seperti yang anda lihat (anak panah merah), satu unit dibalut. Bahagian sel yang lain berada di bahagian bawah lajur tengah. Ini adalah sesuatu yang saya tidak mahu, tiada pembungkusan. Adakah terdapat apa-apa cara untuk mengelakkan ini atau perlukah saya memastikan semua sel mempunyai ketinggian yang sama?
P粉7636623902024-04-01 10:15:03
Untuk menghalang lajur CSS daripada dibalut dalam CSS Tailwind, anda boleh menggunakan sifat pecah dalam. Menetapkan pecah-dalam untuk mengelakkan-lajur pada elemen akan menghalangnya daripada berpecah merentas lajur, anda boleh mencuba logik berikut:
<ol class="relative columns-1 sm:columns-3">
<li class="break-inside-avoid-column">
<img src="https://placehold.co/400x300">id=voluptas minus a qui tempore
</li>
<li class="break-inside-avoid-column">...</li>
...
</ol>
kelas utiliti break-inside-avoid-column disediakan oleh Tailwind CSS dan tetapkan sifat pecah-dalam untuk mengelakkan-lajur. Ini memastikan setiap elemen kekal utuh dalam lajurnya tanpa terbelah.