CSS를 사용하여 div 하단의 정렬 버튼

CSS를 사용하여 div 하단의 정렬 버튼

---

내 div의 오른쪽 하단에 내 버튼을 정렬하고 싶습니다. 어떻게 할 수 있습니까?

div의 현재 CSS :

    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정적이 아닌 모든 값이 작동하지만 relativediv 위치를 자체적으로 변경하지 않기 때문에 가장 쉬운 방법입니다.

따라서 position:relative;콘텐츠 div에 추가하고 버튼에서 float를 제거하고 다음 CSS를 버튼에 추가하십시오.

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

---

CSS3 플렉스 박스를 사용하여 상위 요소의 하단에 버튼을 정렬 할 수도 있습니다.

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

스크린 샷 :

유용한 리소스 :

• 명세서
• MDN
• 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;
}

참고 URL : https://stackoverflow.com/questions/5817233/align-button-at-the-bottom-of-div-using-css