如何並排對齊兩張卡片中的項目

Question

如何在同一行中對齊展位名稱？

上圖顯示了問題。 我嘗試使用 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>

Answer 1

我認為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>

Answer 2

制作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>