如何在容器 div 的右下角放置一个按钮？

Question

我怎样才能把这个查看更多按钮放在容器的右下角？我很难将查看更多按钮放在“后退”div 的右下角。

.back {
  border: #6ACEBC 4px solid;
  margin: 0 20px;
  border-radius: 15px;
  max-width: 100%!important;
  min-height: 200px;
}

.content {
  max-width: 60%;
}

<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 class="float-end">
      <button><a href="#">VIEW MORE</a></button>
    </div>
  </div>
</div>

Answer 1

使用绝对定位将按钮放置在容器的右下方。容器需要定位：相对；在正确的位置获取按钮的上下文。

.back {
    border: #6ACEBC 4px solid;
    margin: 0 20px;
    border-radius: 15px;
    max-width: 100%!important;
    min-height: 200px;
   background-color: darkorange;
   position: relative;
}

.content {
    max-width: 60%;
  
}

button {
  position: absolute;
  bottom: 10px;
  right: 10px;
}

<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 class = "float-end">
                <button><a href="#">VIEW MORE</a></button>
            </div>
        </div>
       

    </div>

Answer 2

您可以使用位置：绝对。创建一个新的包含块 position: relative 在父级上，但是这会将按钮置于流之外，因此您最终可能会与其他元素发生冲突（例如按钮出现在文本内容上）。

.back {
  border: #6ACEBC 4px solid;
  margin: 0 20px;
  border-radius: 15px;
  max-width: 100%!important;
  min-height: 200px;
  position: relative; /* create new containing block */
}

.content {
  max-width: 60%;
}

.view-more {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
}

<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 class="view-more">
      <button><a href="#">VIEW MORE</a></button>
    </div>
  </div>
</div>

另一种方法是将view-more div 移到content div 之外，然后使用display: flex 将其移至右下角。我们确保 div 填充父 div。这将始终确保上面的表格和按钮不会冲突。

.back {
  border: #6ACEBC 4px solid;
  margin: 0 20px;
  border-radius: 15px;
  max-width: 100%!important;
  min-height: 200px;
  display: flex; /* make this a flex container */
  flex-direction: column; /* make the flex divs stack on top of each other rather than side by side */
}

.content {
  max-width: 60%;
}

.view-more {
  flex-grow: 1; /* make the bottom div grow to fill the container */
  display: flex; /* make this a flex container also */
  justify-content:flex-end; /* put the button to the right hand side of the parent div */
  align-items: flex-end; /* put the button at the bottom of the div */
  padding:0.5rem; /* put a bit of padding round it to put some space between the green border and the button */
}

<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>
  <div class="view-more">
    <button><a href="#">VIEW MORE</a></button>
  </div>
</div>

Answer 3

您是否尝试过将“位置：相对”添加到容器然后绝对定位按钮？

.back {
    border: #6ACEBC 4px solid;
    margin: 0 20px;
    border-radius: 15px;
    max-width: 100%!important;
    min-height: 200px;
    position: relative;
   
}

.content {
    max-width: 60%;
    font-size: 5px;
  
}


.float-end {
  position: absolute;
  right:    0;
  bottom:   0;
}

<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>
       <div class="float-end">
       <button><a href="#">VIEW MORE</a></button>
               
            </div>

    </div>