절대 위치 지정없이 하단에 CSS 위치 지정

Question

절대 위치 지정을 사용하지 않고 항상 컨테이너의 맨 아래에 있도록 요소를 배치 할 수 있습니까? 2 개의 요소가 포함 된 컨테이너가 있고 그 중 하나는 텍스트 설명이므로 텍스트만큼 클 수 있습니다. 이전 div의 텍스트가 비어 있는지 여부와 관계없이 두 번째 요소를 페이지 아래쪽에 배치하고 싶습니다. 텍스트가 비어 있지 않은 경우 그 사이에 10px의 여백을두고 싶습니다.

Answer 1

업데이트 : 코드에 적용 flexbox와 JSFiddle.

https://jsfiddle.net/ec7qxtfr/1/

flexbox 당신이 이것을 달성 할 수 있습니다. 상위 컨테이너에 다음을 추가하십시오.

.container { 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
} 

다음 비트는 당신이 원하는 10px 패딩입니다. 컨테이너 내부의 첫 번째 자식 요소를 대상으로합니다.

.child:first-child { 
    padding-bottom: 10px; 
} 

는만큼 첫 번째 자식 div 당신은 어떤 내용 (NO 단락)이없는 경우에도, 존재로, 두 번째 div 여전히 flexbox에 컨테이너 감사의 바닥에 푸시됩니다. 마찬가지로 속성을 주석 처리하여 두 자식 요소 사이에 padding이 있는지 확인할 수 있습니다.

아래의 JSFiddle을 확인하십시오. 부모 컨테이너의 높이를 조정하여 두 번째 div가 컨테이너의 맨 아래에 유지되는지 확인할 수 있습니다.

https://jsfiddle.net/o3r40keu/5/

참고 :이 솔루션 만이 특정 부모 컨테이너 내부에 두 개의 자식 요소를 가질 것으로 가정합니다.

도움이 되었기를 바랍니다.

Answer 2

flexbox를 사용할 수 있습니다. 당신은 당신은 다음 auto에 아이의 여백 상단을 설정할 수 있습니다

.container-class { 
    display: flex; 
    flex-direction: column; 
} 

에 컨테이너를 설정합니다. 당신은이 작업을 위해 용기에 일정한 높이를 설정해야 할 수도 있습니다,하지만 솔루션의 요지 인 flexbox + 마진 탑을 사용

<section class="container-class"> 
    <p class="child">...</p> 
</section> 

: 같은

.child { 
    margin-top: auto; 
} 

html로는 볼 수 있었다 : 바닥에 붙이고 자하는 요소에 자동으로 적용됩니다. 패딩 및 원하는 스타일은 예상대로 작동해야하며 트릭이 필요하지 않습니다. 당신이 당신의 인 flexbox 소품을 접두사해야합니다

주, 즉 :

display: -webkit-box; 
display: -ms-flexbox; 
display: flex; 
-webkit-box-orient: vertical; 
-webkit-box-direction: normal; 
    -ms-flex-direction: column; 
     flex-direction: column;