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

我希望我能很好地理解你。

struct ProgressBar: View {

@Binding var value: Float

var body: some View {
    GeometryReader { geometry in
        ZStack(alignment: .leading) {
            Rectangle().frame(width: geometry.size.width , height: geometry.size.height)
                .opacity(0.3)
                .foregroundColor(Color(UIColor.systemTeal))

            Rectangle().frame(width: min(CGFloat(self.value)*geometry.size.width, geometry.size.width), height: geometry.size.height)
            .foregroundColor(Color(UIColor.systemBlue))
                .animation(.linear)

        }.cornerRadius(45)
    }
}

并在您的CSS中：

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

您可以根据需要增加“最大高度”。这将始终使按钮位于底部。

Answer 2

使用此标记代替<a>标记，并在div内使用它，以便将其放在块元素中：

<div>
    <center><a class="btn btn-sun btn-shadow" href="http://www.google.com" role="button" 
    target="_blank"">Read more</a></center>
</div>

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

2 个答案: