How to Make Two Cards the Same Height
How Can I Make Two Cards for Black African Players and for White Players the Same Height All Those Cards Is Using the Same Class Is There Perhaps a Way to Make...
How can I make two cards for Black African Players and for White Players the same height All those cards is using the same class is there perhaps a way to make it the same height
div.card {
overflow: hidden;
}
.card {
width: 100%;
padding: 9px 20px 9px 20px;
margin-bottom: 0px;
background: #ffffff;
box-shadow: 1px 1px 1px #dfdfdf;
box-sizing: border-box;
height: 100% !important;
3 Answers
Flexbox comes in handy here. Notice how the last element (with three <br>'s is taller than the other two, yet they are all the same height:
* { box-sizing: border-box; }
.container {
display: flex;
flex-flow: row wrap;
}
.card-wrap {
flex: 0 0 33.333%;
display: flex;
padding: 10px; /* gutter width */
}
.card {
box-shadow: 0 0 4px rgba(0,0,0,0.4);
flex: 0 0 100%;
}<div class="container">
<div class="card-wrap">
<div class="card"><br></div>
</div>
<div class="card-wrap">
<div class="card"><br></div>
</div>
<div class="card-wrap">
<div class="card"><br><br><br></div>
</div>
</div>If they are in the same row then you can use display:flex;flex-direction:row; on that row but if they are not in the same row, you can do it with jQuery. the snippet below will make every div with class="card" of same height
$(document).ready(function (){
var maxHeight = 0;
for(i=0;i<$(".card").length;i++){
if($(".card").eq(i)){
var currentHeight = $(".card").eq(i).height();
if(currentHeight>=maxHeight){
maxHeight = currentHeight;
}
}
else{
break;
}
}
$(".card").height(maxHeight);
});
.container {
width: 100%;/*whatever size you want your container*/
border: 3px solid teal;
display: flex; /*Make sure to call this on your container*/
align-items: stretch; /*stretches all cards same height*/
justify-content: space-around; /*some space between cards*/
}
.card {
width: 150px; /*or whatever size card you want*/
border: 2px solid red;
}<div class="container">
<div class="card">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</div>
<div class="card">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
<div class="card">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</div>
</div>This is what worked best for me,
I set display: flex on the container of the cards (not the card itself)
It is flex-direction: row by default when you say display: flex
and then simply added align-items: stretch on the container as well...
This caused my cards to have an equal height. (This solution works only when your flex-direction is set to row)
Hope this helps
Alexander Ross has covered the video game industry for a decade, writing deep dives on game design, esports tournaments, VR developments, and gaming culture.
