Question

我希望在我的网站上使用CSS制作边框，每列显示3张卡片。问题是我不想拆分卡。我的CSS：

<style>
.card {
    border-style: ridge;
    border-width: 3px;
}
.card-deck{
    -webkit-column-count:3;
     overflow-wrap:break-word;   
}
</style>

Cutted Cards

如何停止拆分牌？

Answer 1

将break-inside: avoid;添加到.card元素：

.card {
    border-style: ridge;
    border-width: 3px;
    break-inside: avoid;
}

Answer 2

从理论上讲，您应该可以在break-inside: avoid;上使用.card来避免这种情况，但不幸的是，对css列的支持并不是很好。

更多信息：https://css-tricks.com/almanac/properties/b/break-inside/

支持：http://caniuse.com/#feat=multicolumn

如何在页面拆分时停止破坏表格边框？

2 个答案: