时间戳

首页 > 解决方案 > 有没有办法让每个锚点/按钮在调整网络屏幕大小时不改变/移动它的位置？

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

问题描述

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

在此处输入图像描述

这是与该问题有关的唯一代码，我正在使用带有少量 css 的引导程序。

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

标签： htmlcssbootstrap-4

解决方案

不久前有同样的问题，这就是我解决它的方法（尽管可能有其他方法）：

  1. 添加相对于四个容器卡片的位置（注意这不是针对卡片，而是针对按钮）。在您的示例中，这将是具有通用类 bg-white 的 div。还要在容器卡片的底部添加一个填充，以便在我们定位按钮时为按钮浮动创建空间。
.bg-white {
       position: relative;
       padding-bottom: 60px; 
    }
  1. 在我们刚刚创建的空间内绝对定位按钮。
.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>

推荐阅读