So verhindern Sie das Umbrechen von CSS-Spalten mithilfe von Tailwindcss

Question

Mit tailwindcss habe ich das folgende HTML

<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-bezogenes Tailwind-CSS ist

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

Wie Sie sehen können (roter Pfeil), ist eine Einheit verpackt. Der andere Teil der Zelle befindet sich am unteren Rand der mittleren Spalte. Das ist etwas, was ich nicht will, keine Verpackung. Gibt es eine Möglichkeit, dies zu verhindern, oder sollte ich sicherstellen, dass alle Zellen die gleiche Höhe haben?

Answer 1

要防止 CSS 列在 Tailwind CSS 中换行，您可以使用 break-inside 属性。在

元素上设置break-inside为avoid-column将阻止它们跨列拆分，您可以尝试以下逻辑：

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

break-inside-avoid-column 实用程序类由 Tailwind CSS 提供，并将break-inside 属性设置为avoid-column。这可确保每个

元素在其列中保持完整而不被拆分。