Bagaimana untuk mengelakkan pembalut lajur css menggunakan Tailwindcss

Question

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?

Answer 1

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.