使用 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。这可确保每个 元素在其列中保持完整而不被拆分。