Comment empêcher le retour à la ligne des colonnes CSS à l'aide de Tailwindcss

Question

En utilisant tailwindcss, j'ai le code HTML suivant

<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 le CSS Tailwind lié est

.sm:columns-3 {
   columns: 3;
}

Comme vous pouvez le voir (flèche rouge), une unité est emballée. L'autre partie de la cellule se trouve en bas de la colonne du milieu. C'est quelque chose que je ne veux pas, pas d'emballage. Existe-t-il un moyen d'éviter cela ou dois-je m'assurer que toutes les cellules ont la même hauteur ?

Answer 1

Pour empêcher les colonnes CSS de s'enrouler dans Tailwind CSS, vous pouvez utiliser la propriété break-inside. Définir break-inside pour éviter les colonnes sur les éléments

les empêchera de se diviser en colonnes, vous pouvez essayer la logique suivante :

<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>

Classe utilitaire break-inside-avoid-column fournie par Tailwind CSS et définit la propriété break-inside sur évite-column. Cela garantit que chaque élément

reste intact dans sa colonne sans être divisé.