英文:
Tailwind Columns Cutting Off + Setting Height
问题
我正在尝试创建一个类似于Tailwind文档中展示的瀑布流网格：https://tailwindcss.com/docs/columns#basic-usage
因此，我有以下代码试图实现这个效果：
const Tile = (props) => {const { data } = props;return (<div className='rounded border p-4 mb-4'>{data}</div>);};const Masonry = (props) => {const { data } = props;<div className='columns-3'>{data.map((item) => (<Tilekey={item.name}data={item}/>))}</div>};
然而，出现了某种原因，内容被截断了，就像这样，并且我无法弄清楚为什么。我已经检查了开发工具，尝试为整个容器设置自定义高度，为columns-3所定义的特定容器设置高度，但什么都没有起作用。
我做错了什么？
英文:
I'm trying to create a masonry grid exactly how it's showcased on the Tailwind documentation: https://tailwindcss.com/docs/columns#basic-usage
So, I have the following code trying to achieve that:
const Tile = (props) => {const { data } = props;return (<div className='rounded border p-4 mb-4'>{data}</div>);};const Masonry = (props) => {const { data } = props;<div className='columns-3'>{data.map((item) => (<Tilekey={item.name}data={item}/>))}</div>};
However, for some reason, the content is being cut off like so, and I haven't been able to figure out why. I've checked the dev tools, tried setting custom heights to the entire container, to the specific container where columns-3 is defined, and nothing is working.
What am I doing wrong?
答案1
得分: 1
Apply break-inside: avoid-column 或 break-inside: avoid 与 break-inside-avoid-column 或 break-inside-avoid 分别到 <Tile> 根 <div> 以避免您描述的行为：
英文:
Apply break-inside: avoid-column or break-inside: avoid with break-inside-avoid-column or break-inside-avoid respectively to the <Tile> root <div> to avoid the behavior you describe:
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-html -->
<script src="https://cdn.tailwindcss.com"></script><div class="columns-3"><div class="rounded border p-4 mb-4 break-inside-avoid-column">Foo bar<br/>Foo bar<br/>Foo bar<br/>Foo bar<br/>Foo bar<br/></div><div class="rounded border p-4 mb-4 break-inside-avoid-column">Foo bar<br/>Foo bar<br/>Foo bar<br/>Foo bar<br/>Foo bar<br/></div><div class="rounded border p-4 mb-4 break-inside-avoid-column">Foo bar<br/>Foo bar<br/>Foo bar<br/>Foo bar<br/>Foo bar<br/></div><div class="rounded border p-4 mb-4 break-inside-avoid-column">Foo bar<br/>Foo bar<br/>Foo bar<br/>Foo bar<br/>Foo bar<br/></div><div class="rounded border p-4 mb-4 break-inside-avoid-column">Foo bar<br/>Foo bar<br/>Foo bar<br/>Foo bar<br/>Foo bar<br/></div><div class="rounded border p-4 mb-4 break-inside-avoid-column">Foo bar<br/>Foo bar<br/>Foo bar<br/>Foo bar<br/>Foo bar<br/></div><div class="rounded border p-4 mb-4 break-inside-avoid-column">Foo bar<br/>Foo bar<br/>Foo bar<br/>Foo bar<br/>Foo bar<br/></div></div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论