[英]How to align items in two cards side by side
如何在同一行中对齐展位名称?
上图显示了问题。 我尝试使用 flex-box 但不起作用。 我想将“John Dean”放在所有卡片的底部。 根据 p 标签的大小,名称有不同的位置。
.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>
我认为display: flex
会为您解决问题。 使用容器制作card
flex 并使用flex: 1
扩展card
和container
flex: 1
将推动内容扩展,将p
推到底部。
.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>
制作card
和内部container
flex-columns,然后用flex:1
告诉container
尽可能多地 xpand。
然后使用margin-top:auto
将h4
推到容器底部。
.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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.