英文:
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) => (
<Tile
key={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) => (
<Tile
key={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 -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论