[CSS] div 안에 있는 버튼 오른쪽 하단으로 위치 조정하기

 

버튼을 div 안에서 오른쪽 하단으로 위치를 조정하고 싶었다. 버튼에 margin-top을 줘서 하단으로 조절하기엔 버튼 위에 있는 내용1의 길이에 따라 위치가 계속 변하기 때문에 다른 방법을 찾아야 했다. 

이런 애를

이런 식으로

 

 

relative 속성을 사용해 해결하기

 

relative 속성으로 상하좌우로 값을 주면  현재 버튼이 위치해 있는 곳에서 그만큼 이동하여 위치하게 된다.

.UDbtn {
    position: relative;
    top: 60px;
    left : 250px;
}

<div class="UDbtn">
        <button id="modibtn" type="button" class="btn" style="background-color:#FFD5C2;">수정</button>
        <button id="delbtn" type="button" class="btn" style="background-color: rgb(221, 221, 221);">삭제</button>
      </div>

 

float 속성 + relative 속성을 사용해 해결하기

.UDbtn {
    float: right;
    position: relative;
    top: 60px;
}

 

float : right를 통해 오른쪽으로 버튼의 위치를 조정할 수 있고, 하단으로 버튼의 위치를 조절하기 위해 아까 썼던대로 relative 속성을 이용해 버튼을 하단으로 이동시킨다.