- communauté
- Apprendre
- Bibliothèque d'outils
- Loisirs
Maison > Questions et réponses > le corps du texte
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 ?
P粉7636623902024-04-01 10:15:03
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é.