css 如何在卡片中将flex-row与底部对齐？

bvjveswy 于 2023-02-06 发布在其他

关注(0)|答案(1)|浏览(134)

如何在底部对齐卡片中的flex-row？我目前有两张并排对齐的卡片，但当其中一个文本比另一个文本小时，包含"（100）（100）"的div将无法对齐。
我知道像这样的问题one，但我已经尝试了他们的解决方案，没有工作。
Running example.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

  <div class="row mb-2">
      <div class="col-md-6 d-flex align-items-stretch">
        <div class="card mb-4 shadow bg-white rounded">
          <div class="card-body">
            <div class="row pb-0">
              <div class="col-9">
                <strong class="mb-2 text-secondary"">Name A</strong>
              </div>
              <div class="col-3">
                <img class="mb-2 rounded-circle float-right" src="" style="max-width:30px; height:auto;" alt="">
              </div>
            </div>
            <h3 class="card-title mb-0">
              <a target="_blank" rel="noopener noreferrer" class="text-dark" href="">Article 1 Title</a>
            </h3>
            <div class="mb-1 text-muted date">2020-01-01</div>
            <p class="card-text mb-auto blog-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu sem integer vitae justo eget magna fermentum. Ultricies lacus sed turpis tincidunt id aliquet risus feugiat in. Eget felis eget nunc lobortis mattis aliquam faucibus.</p>

<!-- This should be aligned to the bottom -->

            <div class="d-flex flex-row mt-0 ml-0 pl-0 ">
                <!-- <span class="flaticon-clapping-2" data-toggle="tooltip" data-placement="top" title="Nº de likes no Arquivo de Opinião"></span> -->
                <span class="flaticon-facebook-1" data-toggle="tooltip" data-placement="top" title="Engagment Facebook: nº de partilhas + nº de reações + nº de comentários"></span>
                <span class="flaticon-facebook-1-text" data-toggle="tooltip" data-placement="top" data-html="true">(100)</span>
                <span class="flaticon-twitter-1" data-toggle="tooltip" data-placement="top" ></span>
                <span class="flaticon-twitter-1-text" data-toggle="tooltip" data-placement="top" title="">(100)</span>
            </div>

          </div>
        </div>
      </div>

      <div class="col-md-6 d-flex align-items-stretch">
        <div class="card mb-4 shadow bg-white rounded">
          <div class="card-body">
            <div class="row pb-0">
              <div class="col-9">
                <strong class="mb-2 text-secondary"">Name A</strong>
              </div>
              <div class="col-3">
                <img class="mb-2 rounded-circle float-right" src="" style="max-width:30px; height:auto;" alt="">
              </div>
            </div>
            <h3 class="card-title mb-0">
              <a target="_blank" rel="noopener noreferrer" class="text-dark" href="">Article 1 Title</a>
            </h3>
            <div class="mb-1 text-muted date">2020-02-01</div>
            <p class="card-text mb-auto blog-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>

<!-- This should be aligned to the bottom -->

            <div class="d-flex flex-row mt-0 ml-0 pl-0 ">
                <span class="flaticon-facebook-1" data-toggle="tooltip" data-placement="top" title="Engagment Facebook: nº de partilhas + nº de reações + nº de comentários"></span>
                <span class="flaticon-facebook-1-text" data-toggle="tooltip" data-placement="top" data-html="true">(100)</span>
                <span class="flaticon-twitter-1" data-toggle="tooltip" data-placement="top" ></span>
                <span class="flaticon-twitter-1-text" data-toggle="tooltip" data-placement="top" title="">(100)</span>
            </div>

          </div>
        </div>
      </div>

</div>

css

来源：https://stackoverflow.com/questions/66082808/how-can-i-align-a-flex-row-to-bottom-in-a-card

1条答案

按热度按时间

pengsaosao1#

如果您在card-bodydiv中添加d-flex flex-column，在bottomdiv中添加mt-auto，将解决您的问题。
完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

  <div class="row mb-2">
      <div class="col-md-6 d-flex align-items-stretch">
        <div class="card mb-4 shadow bg-white rounded">
          <div class="card-body d-flex flex-column">
            <div class="row pb-0">
              <div class="col-9">
                <strong class="mb-2 text-secondary">Name A</strong>
              </div>
              <div class="col-3">
                <img class="mb-2 rounded-circle float-right" src="" style="max-width:30px; height:auto;" alt="">
              </div>
            </div>
            <h3 class="card-title mb-0">
              <a target="_blank" rel="noopener noreferrer" class="text-dark" href="">Article 1 Title</a>
            </h3>
            <div class="mb-1 text-muted date">2020-01-01</div>
            <p class="card-text mb-auto blog-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu sem integer vitae justo eget magna fermentum. Ultricies lacus sed turpis tincidunt id aliquet risus feugiat in. Eget felis eget nunc lobortis mattis aliquam faucibus.</p>

<!-- This should be aligned to the bottom -->

            <div class="d-flex flex-row mt-auto ml-0 pl-0 ">
                <!-- <span class="flaticon-clapping-2" data-toggle="tooltip" data-placement="top" title="Nº de likes no Arquivo de Opinião"></span> -->
                <span class="flaticon-facebook-1" data-toggle="tooltip" data-placement="top" title="Engagment Facebook: nº de partilhas + nº de reações + nº de comentários"></span>
                <span class="flaticon-facebook-1-text" data-toggle="tooltip" data-placement="top" data-html="true">(100)</span>
                <span class="flaticon-twitter-1" data-toggle="tooltip" data-placement="top" ></span>
                <span class="flaticon-twitter-1-text" data-toggle="tooltip" data-placement="top" title="">(100)</span>
            </div>

          </div>
        </div>
      </div>

      <div class="col-md-6 d-flex align-items-stretch">
        <div class="card mb-4 shadow bg-white rounded">
          <div class="card-body d-flex flex-column">
            <div class="row pb-0">
              <div class="col-9">
                <strong class="mb-2 text-secondary">Name A</strong>
              </div>
              <div class="col-3">
                <img class="mb-2 rounded-circle float-right" src="" style="max-width:30px; height:auto;" alt="">
              </div>
            </div>
            <h3 class="card-title mb-0">
              <a target="_blank" rel="noopener noreferrer" class="text-dark" href="">Article 1 Title</a>
            </h3>
            <div class="mb-1 text-muted date">2020-02-01</div>
            <p class="card-text mb-auto blog-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>

<!-- This should be aligned to the bottom -->

            <div class="d-flex flex-row mt-auto ml-0 pl-0 ">
                <span class="flaticon-facebook-1" data-toggle="tooltip" data-placement="top" title="Engagment Facebook: nº de partilhas + nº de reações + nº de comentários"></span>
                <span class="flaticon-facebook-1-text" data-toggle="tooltip" data-placement="top" data-html="true">(100)</span>
                <span class="flaticon-twitter-1" data-toggle="tooltip" data-placement="top" ></span>
                <span class="flaticon-twitter-1-text" data-toggle="tooltip" data-placement="top" title="">(100)</span>
            </div>

          </div>
        </div>
      </div>

</div>
</body>
</html>

赞(0）回复(0）举报 2023-02-06

我来回答

css 如何在卡片中将flex-row与底部对齐？

1条答案

相关问题

热门标签

最新问答