Căn chỉnh nút ở cuối div bằng cách sử dụng CSS

Tôi muốn căn chỉnh nút của mình ở góc dưới cùng bên phải của div. Làm thế nào tôi có thể làm điều đó?

Css hiện tại của div:

    float: right;
    width: 83%;
    margin-right: 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    height:625px;
    overflow:auto;

Bạn có thể sử dụng position:absolute;để định vị hoàn toàn một phần tử trong div cha. Khi sử dụng position:absolute;phần tử sẽ được định vị tuyệt đối từ div cha được định vị đầu tiên, nếu không thể tìm thấy phần tử này, nó sẽ định vị tuyệt đối từ cửa sổ, vì vậy bạn cần đảm bảo rằng div nội dung đã được định vị.

Để làm cho nội dung div được định vị, tất cả các positiongiá trị không tĩnh sẽ hoạt động, nhưng relativelà cách dễ nhất vì nó không tự thay đổi vị trí div.

Vì vậy, thêm position:relative;vào div nội dung, loại bỏ float khỏi nút và thêm css sau vào nút:

position: absolute;
right:    0;
bottom:   0;

CSS3 flexbox cũng có thể được sử dụng để căn chỉnh nút ở cuối phần tử mẹ.

HTML bắt buộc:

<div class="container">
  <div class="btn-holder">
    <button type="button">Click</button>
  </div>
</div>

CSS cần thiết:

.container {
  justify-content: space-between;
  flex-direction: column;
  height: 100vh;
  display: flex;
}
.container .btn-holder {
  justify-content: flex-end;
  display: flex;
}

Ảnh chụp màn hình:

Tài nguyên hữu ích:

• Thông số kỹ thuật
• MDN
• Thủ thuật CSS

* {box-sizing: border-box;}
body {
  background: linear-gradient(orange, yellow);
  font: 14px/18px Arial, sans-serif;
  margin: 0;
}
.container {
  justify-content: space-between;
  flex-direction: column;
  height: 100vh;
  display: flex;
  padding: 10px;
}
.container .btn-holder {
  justify-content: flex-end;
  display: flex;
}
.container .btn-holder button {
  padding: 10px 25px;
  background: blue;
  font-size: 16px;
  border: none;
  color: #fff;
}

<div class="container">
  <p>Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... Lorem ip sum dolor sit amet... </p>
  <div class="btn-holder">
    <button type="button">Click</button>
  </div>
</div>

Vùng chứa mẹ phải có điều này:

position: relative;

Bản thân nút phải có cái này:

position: relative;
bottom: 20px;
right: 20px;

hoặc bất cứ điều gì bạn thích

Đi đến bên phải và có thể được sử dụng theo cách tương tự cho bên trái

.yourComponent
{
   float: right;
   bottom: 0;
}