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> <div> <div><br></div> </div> <div> <div><br></div> </div> <div> <div><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> <div> 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> 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> 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
2
