使用 tailwindcss 我有以下 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 的相關 Tailwind css 是
.sm:columns-3 {
columns: 3;
}
如您所見（紅色箭頭），一個單元被包裹。該儲存格的另一部分位於中間列的底部。這是我不想要的東西，沒有包裝。有什麼方法可以防止這種情況，或者我應該確保所有單元格具有相同的高度嗎？
P粉7636623902024-04-01 10:15:03
要防止 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。這可確保每個 元素在其列中保持完整而不被分割。