我正在使用 Bulma有一列卡片,无论内容如何,都需要具有相同的高度。
为了实现,我创建了以下类
.equal-height
display: flex
flex-direction: column
height: 100%
我的 HTML 看起来像
<div class='columns is-multiline'>
<div class='column is-one-fifth'>
<div class='card equal-height'>
<div class='card-content'>
# CONTENT GOES HERE
</div>
<div class='card-footer'>
# FOOTER GOES HERE
</div>
</div>
</div>
<div class='column is-one-fifth'>
<div class='card equal-height'>
<div class='card-content'>
# CONTENT GOES HERE
</div>
<div class='card-footer'>
# FOOTER GOES HERE
</div>
</div>
</div>
</div>
产生类似的东西
现在我正在尝试制作
card-footer
像下面一样粘在卡片的底部。我用
flex
尝试了一些东西但它们真的没有意义。关于我如何做到这一点的任何想法?
最佳答案
添加 “flex :自动;” 至 '.card-contents' 使卡片页脚粘在卡片的底部。这是工作中的 jsfiddle link .
.equal-height {
display: flex;
flex-direction: column;
height: 100%;
}
.equal-height .card-content {
flex: auto;
}
关于css - 将 div 粘贴在等高卡片的底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53076202/