html - 有没有办法让每个 anchor /按钮在调整网络屏幕大小时不改变/移动其位置？

Question

正如您在提供的图像中看到的，如果我尝试调整网页大小，“阅读更多” anchor /按钮也会移动。有没有办法让它们各自的位置在调整网页屏幕大小时保持不变？我也尝试过固定位置。

这是针对该问题使用的唯一代码，我正在使用带有少量 css 的 bootstrap。

<section class="second-section">
<div class="container-fluid">
  <div class="row text-center">
     <div class="col-md bg-white border">
      <div class="card-1 text-left ">
        <h1>Business <span>Mentoring</span></h1>
        <p>Our mentors are leading professional and experts in their field with a passion....</p>
        <a href="#" class="readMore-anchor">Read more</a>
      </div>
    </div>
     <div class="col-md bg-white border">
      <div class="card-2 text-left">
        <h1>Business <span>Coaching</span></h1>
        <p>Our coaches are successful professional and leaders in their field, who ....</p>
        <a href="#" class="readMore-anchor">Read more</a>
      </div>
     </div>
     <div class="col-md bg-white border">
      <div class="card-3 text-left">
        <h1>Personal <span>Mentoring</span> and coaching</h1>
        <p>is where have professionals ready to work with a family,...</p>
        <a href="#" class="readMore-anchor">Read more</a>
      </div>
     </div>
     <div class="col-md bg-white border">
      <div class="card-4 text-left">
        <h1>Career <span>exploration</span></h1>
        <p>Career advice and exploration is vital if you want to maximise your potential in today's....</p>
        <a href="#" class="readMore-anchor">Read more</a>
      </div>
     </div>
  </div>
</div>
</section> 

.card-1 .card-2 .card-3 .card-4 h1{
  width: 100%;  
  font-size: 40px; 
  line-height: 50px; 
  font-family: "Montserrat Bold";
}
.card-1 h1 span{
  display: block;
}
.card-1 .card-2 .card-3 .card-4 p{
  width: 100%;
  max-width: 325px;
  font-size: 16px;
  color: #232020;
  line-height: 28px;;
  font-family: "Montserrat Regular";
} 
.second-section p{
  margin: 0;  
}
.readMore-anchor{
  width: 100%;
  height: 47px;
  font-size: 16px;
  max-width: 161px;
  line-height: 50px;
  padding: 15px 38px;
  background-color: #8cd9f9; ;
} 

Answer 1

不久前也遇到过同样的问题，这是我解决它的方法(尽管可能还有其他方法):

1. 添加相对于四个容器卡的位置(请注意，这不是针对卡，而是针对按钮)。在您的示例中，这将是具有公共(public)类 bg-white 的 div。还要在容器卡的底部添加填充，以便在我们放置按钮时为按钮 float 创建一个空间。

.bg-white {
       position: relative;
       padding-bottom: 60px; 
    }

将按钮绝对定位在我们刚刚创建的空间内。

.bg-white > .text-left > .readMore-anchor {    
    position: absolute;
    right: 10px;
    bottom: 10px;
}

您最终应该得到这样的结果，其中文本和按钮之间的空白将自动调整以匹配包含最多文本的卡片，并保持统一。 (我没有完成让我的像你的一样漂亮，但我相信它具有你正在寻找的功能)。

.card-1 .card-2 .card-3 .card-4 h1{
  width: 100%;  
  font-size: 40px; 
  line-height: 50px; 
  font-family: "Montserrat Bold";  
}
.card-1 h1 span{
  display: block;
}
.card-1 .card-2 .card-3 .card-4 p{
  width: 100%;
  max-width: 325px;
  font-size: 16px;
  color: #232020;
  line-height: 28px;;
  font-family: "Montserrat Regular";
} 
.second-section p{
  margin: 0;  
}
.readMore-anchor{
  width: 100%;
  height: 47px;
  font-size: 16px;
  max-width: 161px;
  line-height: 50px;
  padding: 15px 38px;
  background-color: #8cd9f9; ;
} 



.bg-white {
   position: relative;
   padding-bottom: 60px; 
}

.bg-white > .text-left > .readMore-anchor {    
    position: absolute;
    right: 10px;
    bottom: 10px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<section class="second-section">
    <div class="container-fluid">
      <div class="row text-center">
         <div class="col-md bg-white border">
          <div class="card-1 text-left ">
            <h1>Business <span>Mentoring</span></h1>
            <p>Our mentors are leading professional and experts in their field with a passion....</p>
            <a href="#" class="readMore-anchor">Read more</a>
          </div>
        </div>
         <div class="col-md bg-white border">
          <div class="card-2 text-left">
            <h1>Business <span>Coaching</span></h1>
            <p>Our coaches are successful professional and leaders in their field, who ....</p>
            <a href="#" class="readMore-anchor">Read more</a>
          </div>
         </div>
         <div class="col-md bg-white border">
          <div class="card-3 text-left">
            <h1>Personal <span>Mentoring</span> and coaching</h1>
            <p>is where have professionals ready to work with a family,...</p>
            <a href="#" class="readMore-anchor">Read more</a>
          </div>
         </div>
         <div class="col-md bg-white border">
          <div class="card-4 text-left">
            <h1>Career <span>exploration</span></h1>
            <p>Career advice and exploration is vital if you want to maximise your potential in today's....</p>
            <a href="#" class="readMore-anchor">Read more</a>
          </div>
         </div>
      </div>
    </div>
    </section>