如何并排对齐两张卡片中的项目

Question

How can I align booth names in the same line ?

The image above show the problem. I tried to use flex-box but is not working. I would like to position "John Dean" in the bottom of all cards. Depending the size of the p tag the names have differente positions.

 .test { display: flex; flex-direction: row; } .card { border: 1px solid #dadada; box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.2); transition: 0.2s; width: 50%; } .card h3 { padding: 2px; margin: 8px 0; /* line-height: 20px !important; font-size: 18px !important; font-weight: 500 !important; */ } .card:hover { box-shadow: 8px 8px 16px 0 rgba(0, 0, 0, 0.2); } .card .container { padding: 2px 14px; } .card p { margin: 14px 0; }

 <h2>Card</h2> <div class="test"> <div class="card"> <img src="https://www.washingtonpost.com/resizer/9YWv-qOa9uW7CQZ9UGiW23eTZzU=/1484x0/arc-anglerfish-washpost-prod-washpost.s3.amazonaws.com/public/BTCNJJN2Y43KPHPXPQWPASXRKM.jpg" alt="Avatar" style="width:100%"> <div class="container"> <p> Lorem Ipsum ie like Aldus Pa geMaker including versions of Lorem Ipsum. </p> <h4>john dean</h4> </div> </div> <div class="card"> <img src="https://www.washingtonpost.com/resizer/9YWv-qOa9uW7CQZ9UGiW23eTZzU=/1484x0/arc-anglerfish-washpost-prod-washpost.s3.amazonaws.com/public/BTCNJJN2Y43KPHPXPQWPASXRKM.jpg" alt="Avatar" style="width:100%"> <div class="container"> <p> Lorem Ipsum ie like Aldus Pa geMaker including versions of Lorem Ipsum. Lorem Ipsum ie like Aldus Pa geMaker including versions of Lorem Ipsum. </p> <h4>john dean</h4> </div> </div> </div>

Answer 1

I think display: flex will do the trick for you. Making card flex with container and expanding both card and container with flex: 1 will push make content expand, pushing p to the bottom.

 .test { display: flex; flex-direction: row; } .card { display: flex; flex-direction: column; border: 1px solid #dadada; box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.2); transition: 0.2s; width: 50%; } .card h3 { padding: 2px; margin: 8px 0; /* line-height: 20px !important; font-size: 18px !important; font-weight: 500 !important; */ } .card:hover { box-shadow: 8px 8px 16px 0 rgba(0, 0, 0, 0.2); } .card .container { display: flex; flex: 1; height: 100%; flex-direction: column; padding: 2px 14px; } .card p { flex: 1; margin: 14px 0; }

 <h2>Card</h2> <div class="test"> <div class="card"> <img src="https://www.washingtonpost.com/resizer/9YWv-qOa9uW7CQZ9UGiW23eTZzU=/1484x0/arc-anglerfish-washpost-prod-washpost.s3.amazonaws.com/public/BTCNJJN2Y43KPHPXPQWPASXRKM.jpg" alt="Avatar" style="width:100%"> <div class="container"> <p> Lorem Ipsum ie like Aldus Pa geMaker including versions of Lorem Ipsum. </p> <h4>john dean</h4> </div> </div> <div class="card"> <img src="https://www.washingtonpost.com/resizer/9YWv-qOa9uW7CQZ9UGiW23eTZzU=/1484x0/arc-anglerfish-washpost-prod-washpost.s3.amazonaws.com/public/BTCNJJN2Y43KPHPXPQWPASXRKM.jpg" alt="Avatar" style="width:100%"> <div class="container"> <p> Lorem Ipsum ie like Aldus Pa geMaker including versions of Lorem Ipsum. Lorem Ipsum ie like Aldus Pa geMaker including versions of Lorem Ipsum. </p> <h4>john dean</h4> </div> </div> </div>

Answer 2

Make the card and the inner container flex-columns, then tell the container to xpand as much as possible with flex:1 .

Then push the h4 to the bottom of the container with margin-top:auto .

 .test { display: flex; flex-direction: row; } .card { border: 1px solid #dadada; box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.2); transition: 0.2s; width: 50%; display: flex; flex-direction: column; } .card h3 { padding: 2px; margin: 8px 0; /* line-height: 20px !important; font-size: 18px !important; font-weight: 500 !important; */ } .card:hover { box-shadow: 8px 8px 16px 0 rgba(0, 0, 0, 0.2); } .card .container { padding: 2px 14px; flex: 1; display: flex; flex-direction: column; } .card h4 { margin-top: auto; } .card p { margin: 14px 0; }

 <h2>Card</h2> <div class="test"> <div class="card"> <img src="https://www.washingtonpost.com/resizer/9YWv-qOa9uW7CQZ9UGiW23eTZzU=/1484x0/arc-anglerfish-washpost-prod-washpost.s3.amazonaws.com/public/BTCNJJN2Y43KPHPXPQWPASXRKM.jpg" alt="Avatar" style="width:100%"> <div class="container"> <p> Lorem Ipsum ie like Aldus Pa geMaker including versions of Lorem Ipsum. </p> <h4>john dean</h4> </div> </div> <div class="card"> <img src="https://www.washingtonpost.com/resizer/9YWv-qOa9uW7CQZ9UGiW23eTZzU=/1484x0/arc-anglerfish-washpost-prod-washpost.s3.amazonaws.com/public/BTCNJJN2Y43KPHPXPQWPASXRKM.jpg" alt="Avatar" style="width:100%"> <div class="container"> <p> Lorem Ipsum ie like Aldus Pa geMaker including versions of Lorem Ipsum. Lorem Ipsum ie like Aldus Pa geMaker including versions of Lorem Ipsum. </p> <h4>john dean</h4> </div> </div> </div>