ปุ่มจัดแนวที่ด้านล่างของ div โดยใช้ CSS

ฉันต้องการจัดแนวปุ่มที่มุมขวาล่างของ div ฉันจะทำเช่นนั้นได้อย่างไร?

css ปัจจุบันของ div:

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

คุณสามารถใช้position:absolute;เพื่อวางตำแหน่งองค์ประกอบภายใน div ระดับบนสุด เมื่อใช้position:absolute;องค์ประกอบจะถูกวางตำแหน่งอย่างแน่นอนจาก div แม่ตำแหน่งแรกหากไม่พบองค์ประกอบจะวางตำแหน่งจากหน้าต่างอย่างแน่นอนดังนั้นคุณจะต้องตรวจสอบให้แน่ใจว่าตำแหน่ง div เนื้อหาอยู่ในตำแหน่ง

ในการกำหนดตำแหน่ง div ของเนื้อหาpositionค่าทั้งหมดที่ไม่คงที่จะทำงานได้ แต่relativeเป็นวิธีที่ง่ายที่สุดเนื่องจากไม่ได้เปลี่ยนตำแหน่ง div ด้วยตัวเอง

ดังนั้นเพิ่มลงposition:relative;ใน div เนื้อหาลบลอยออกจากปุ่มและเพิ่ม css ต่อไปนี้ในปุ่ม:

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

CSS3 flexbox ยังสามารถใช้เพื่อจัดเรียงปุ่มที่ด้านล่างขององค์ประกอบหลัก

HTML ที่ต้องการ:

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

CSS ที่จำเป็น:

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

ภาพหน้าจอ:

แหล่งข้อมูลที่เป็นประโยชน์:

• ข้อกำหนด
• นพ
• เคล็ดลับ 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>

คอนเทนเนอร์หลักต้องมีสิ่งนี้:

position: relative;

ปุ่มจะต้องมีสิ่งนี้:

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

หรืออะไรก็ได้ที่คุณต้องการ

ไปทางขวาและสามารถใช้ในลักษณะเดียวกันกับทางซ้าย

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