如何将VIEW MORE按钮置于back容器的右下角？

你的问题出在两处：一是.back容器没设置定位上下文，二是按钮被放在仅占60%宽度的.content容器里，导致float-end只能在小范围内靠右，到不了.back的右下角。

直接调整这两处即可：

修改后的代码 #

CSS 部分 #

.back {
  border: #6ACEBC 4px solid;
  margin: 0 20px;
  border-radius: 15px;
  max-width: 100%!important;
  min-height: 200px;
  position: relative; /* 新增：给容器设置相对定位，作为绝对定位的参考基准 */
}

.content {
  max-width: 60%;
}

HTML 部分 #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="back">
  <div class="content">
    <div class="row ps-3 text-center">
      <div class="col">Order #</div>
      <div class="col">Order Name</div>
      <div class="col">Quantity</div>
      <div class="col">Price per pcs</div>
      <div class="col">Total Price</div>
    </div>
    <div class="row ps-3 text-center">
      <div class="col">3</div>
      <div class="col">Pencil</div>
      <div class="col">5</div>
      <div class="col">10</div>
      <div class="col">50</div>
    </div>
  </div>
  <!-- 将按钮容器移出.content，直接放在.back内部 -->
  <div style="position: absolute; bottom: 15px; right: 20px;">
    <button><a href="#">VIEW MORE</a></button>
  </div>
</div>

关键修改说明 #

• 给.back添加position: relative：让内部的绝对定位元素以该容器为基准，而非整个页面。
• 移出按钮容器：摆脱.content的宽度限制，直接在.back的范围内定位。
• 绝对定位固定位置：通过bottom和right属性控制按钮与容器右下角的间距，可根据需求调整数值。

如果想用Bootstrap自带类替代自定义样式，也可以把按钮容器换成以下写法：

<div class="position-absolute bottom-0 end-0 m-3">
  <button><a href="#">VIEW MORE</a></button>
</div>

内容的提问来源于stack exchange，提问作者Chris