html - 我需要按钮始终在底部对齐

Question

我需要按钮在框的底部对齐，而不管文本的数量。我试过使用 flex，但仍然无法正常工作。这是html。所以 3 个框并排显示，我希望按钮始终与底部对齐(因此它们都是垂直对齐的)

html:

 <div id="" class="col-lg-4 col-md-6 text-center mb-5 building-block">
            <div class="white-bg box no-margin">
              <div class="news-container" id="news1">
                <div class="news-image"></div>
              </div>
              <div class="list-container">
                <h5 class="title dark-violet">
                  title
                </h5>
                <p class="body-text">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce finibus purus vitae tellus elementum, quis aliquam orci finibus. Maecenas velit odio, aliquet id augue eu, tristique dignissim risus. magna, quis feugiat sapien commodo sit amet. Donec sodales nulla sapien, eu luctus sem tempor at.
                </p>
                <a
                  class="btn btn-sun btn-shadow"
                  href="http://www.google.com"
                  role="button"
                  target="_blank""
                  >Read more</a
                >
              </div>
            </div>
          </div>

Answer 1

希望我能很好地理解你。

 <div id="" class="col-lg-4 col-md-6 text-center mb-5 building-block">
            <div class="white-bg box no-margin">
              <div class="news-container" id="news1">
                <div class="news-image"></div>
              </div>
              <div class="list-container">
                <h5 class="title dark-violet">
                  title
                </h5>
                <div class="body-text-div">
                  <p class="body-text">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce finibus purus vitae tellus elementum, quis aliquam orci finibus. Maecenas velit odio, aliquet id augue eu, tristique dignissim risus. magna, quis feugiat sapien commodo sit amet. Donec sodales nulla sapien, eu luctus sem tempor at.
                </p>
                </div>
                <div class="button-container">
                 <a
                  class="btn btn-sun btn-shadow"
                  href="http://www.google.com"
                  >Read more</a>
                </div>
              </div>
            </div>
          </div>

在你的 CSS 中:

<style>
.list-container{
  display: flex;
  flex-direction: column;
}
.body-text-div{
  background-color: #c0c1c3;
  height: auto;
  max-height: 500px;
  overflow: scroll;
}
.button-container{
  position: fixed;
  bottom: 0;
}
</style>

您可以根据需要增加“max-height”。这将始终将按钮带到底部。