如何使用 Tailwindcss 防止 css 列换行-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

如何使用 Tailwindcss 防止 css 列换行

P粉392861047 2024-03-31 15:29:53

[CSS3讨论组]

803

使用 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粉392861047

全部回复(1)

P粉7636623902024-04-01 10:15:03 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。这可确保每个

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