flexbox中的等高自举卡 [英] equal height bootstrap cards in flexbox
本文介绍了flexbox中的等高自举卡的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我用我的卡组柔性盒的问题是，我想弹性项目div与.card类应该保持相同的高度，如果.card-block.p内的文字增加在一张卡剩下的纸牌高度也随着卡的增加。
这里是我的小提琴： https ：//jsfiddle.net/a2d758jg/
.card -group {display：-webkit-flex;显示：flex; flex-wrap：wrap; max-height：475px; background-color：lightgrey;}。card img {width：100％;}。card {background-color：cornflowerblue;宽度：30％; margin：0px; flex：2; border：1px solid lightgrey;}。card-block {padding：10px; background-color：#fff;}。card-title {font-size：18px;颜色：灰色; font-family：verdana，sans;}。card-footer {padding：15px; border-top：1px solid lightgrey; < div class = 容器 > < div class =card-group> < div class =card> < img class =card-img-topsrc =https://static.pexels.com/photos/132987/pexels-photo-132987.jpegalt =Card image cap> < div class =card-block> < h4 class =card-title>卡片标题< / h4> < p class =card-text>这是一张更宽的卡片，其中包含以下支持文本，作为附加内容的自然导入。此内容稍长一些。< / p> < / DIV> < div class =card-footer> <小班=文字静音>上次更新3分钟前< /小> < / DIV> < / DIV> < div class =card> < img class =card-img-topsrc =https://static.pexels.com/photos/132987/pexels-photo-132987.jpegalt =Card image cap> < div class =card-block> < h4 class =card-title>卡片标题< / h4> < p class =card-text>这张卡片有一张更宽的卡片，下面有支持文本，作为额外内容的自然导入。支持下面的文本作为额外内容的自然引导。这是一个更宽的卡片，其中包含以下支持文本，作为额外内容的自然引导。< / p> < / DIV> < div class =card-footer> <小班=文字静音>上次更新3分钟前< /小> < / DIV> < / DIV> < div class =card> < img class =card-img-topsrc =https://static.pexels.com/photos/132987/pexels-photo-132987.jpegalt =Card image cap> < div class =card-block> < h4 class =card-title>卡片标题< / h4> < p class =card-text>这是一张更宽的卡片，其中包含以下支持文本，作为附加内容的自然导入。这张卡的内容比第一张还要长，以显示相同的高度操作。< / p> < / DIV> < div class =card-footer> <小班=文字静音>上次更新3分钟前< /小> < / DIV> < / DIV> < / div>< / div>
解决方案 对代码进行四项调整： data-console =truedata-babel =false>
。 card-group {display：-webkit-flex;显示：flex; flex-wrap：wrap; / * max-height：475px; < - remove * / background-color：lightgrey;}。card img {width：100％;}。card {background-color：cornflowerblue;宽度：30％; margin：0px; flex：2; border：1px solid lightgrey;显示：flex; / * new * / flex-direction：column; / * new * /}。card-block {padding：10px; background-color：#fff; flex：1; / * new * /}。card-title {font-size：18px;颜色：灰色; font-family：verdana，sans;}。card-footer {padding：15px; border-top：1px solid lightgrey; < div class = 容器 > < div class =card-group> < div class =card> < img class =card-img-topsrc =https://static.pexels.com/photos/132987/pexels-photo-132987.jpegalt =Card image cap> < div class =card-block> < h4 class =card-title>卡片标题< / h4> < p class =card-text>这是一张更宽的卡片，其中包含以下支持文本，作为附加内容的自然导入。此内容稍长一些。< / p> < / DIV> < div class =card-footer> <小班=文字静音>上次更新3分钟前< /小> < / DIV> < / DIV> < div class =card> < img class =card-img-topsrc =https://static.pexels.com/photos/132987/pexels-photo-132987.jpegalt =Card image cap> < div class =card-block> < h4 class =card-title>卡片标题< / h4> < p class =card-text>这张卡片有一张更宽的卡片，下面有支持文本，作为额外内容的自然导入。支持下面的文本作为额外内容的自然引导。这是一个更广泛的卡片，其中包含以下支持文本作为自然引入附加内容。< / p> < / DIV> < div class =card-footer> <小班=文字静音>上次更新3分钟前< /小> < / DIV> < / DIV> < div class =card> < img class =card-img-topsrc =https://static.pexels.com/photos/132987/pexels-photo-132987.jpegalt =Card image cap> < div class =card-block> < h4 class =card-title>卡片标题< / h4> < p class =card-text>这是一张更宽的卡片，其中包含以下支持文本，作为附加内容的自然导入。这张卡的内容比第一张还要长，以显示相同的高度操作。< / p> < / DIV> < div class =card-footer> <小班=文字静音>上次更新3分钟前< /小> < / DIV> < / DIV> < / div>< / div>
$ b
i am using flex-box for my cards group problem is that i want the flex item div with .card class should remain same height if text inside the .card-block.p increases in one card the rest of the cards height also increases with the card.
here is my fiddle: https://jsfiddle.net/a2d758jg/
.card-group {
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
max-height: 475px;
background-color: lightgrey;
}
.card img {
width: 100%;
}
.card {
background-color: cornflowerblue;
width: 30%;
margin: 0px;
flex: 2;
border: 1px solid lightgrey;
}
.card-block {
padding: 10px;
background-color: #fff;
}
.card-title {
font-size: 18px;
color: grey;
font-family: verdana, sans;
}
.card-footer {
padding: 15px;
border-top: 1px solid lightgrey;
background-color: lightgrey;
}
<div class="container">
<div class="card-group">
<div class="card">
<img class="card-img-top" src="https://static.pexels.com/photos/132987/pexels-photo-132987.jpeg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src="https://static.pexels.com/photos/132987/pexels-photo-132987.jpeg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card hasThis is a wider card with supporting text below as a natural lead-in to additional content. supporting text below as a natural lead-in to additional content.This is a wider card with supporting text below as a natural lead-in to additional
content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src="https://static.pexels.com/photos/132987/pexels-photo-132987.jpeg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
</div>
解决方案
Make four adjustments to your code:
.card-group {
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
/* max-height:475px; <-- remove */
background-color: lightgrey;
}
.card img {
width: 100%;
}
.card {
background-color: cornflowerblue;
width: 30%;
margin: 0px;
flex: 2;
border: 1px solid lightgrey;
display: flex; /* new */
flex-direction: column; /* new */
}
.card-block {
padding: 10px;
background-color: #fff;
flex: 1; /* new */
}
.card-title {
font-size: 18px;
color: grey;
font-family: verdana, sans;
}
.card-footer {
padding: 15px;
border-top: 1px solid lightgrey;
background-color: lightgrey;
}
<div class="container">
<div class="card-group">
<div class="card">
<img class="card-img-top" src="https://static.pexels.com/photos/132987/pexels-photo-132987.jpeg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src="https://static.pexels.com/photos/132987/pexels-photo-132987.jpeg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card hasThis is a wider card with supporting text below as a natural lead-in to additional content. supporting text below as a natural lead-in to additional content.This is a wider card with supporting text below as a natural lead-in to additional
content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src="https://static.pexels.com/photos/132987/pexels-photo-132987.jpeg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
</div>
这篇关于flexbox中的等高自举卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
