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灵活，并用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的弹性列，然后告诉container用flex:1尽可能地xpand。

然后用h4将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>

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

2 个答案: