Divs의 바닥을 같은 레벨로 맞추기

Question

코멘트 divs 하단을 같은 레벨의 버튼 하단 라인으로 가져 오는 방법이 있습니까?

이것이 현재 작동하는 방식입니다. Quick jsfiddle

.button_div { 
    width: 54px; 
    height: 20px; 
    float: left; 
} 

.comments { 
    width: 320px; 
    margin-right: -100px; 
    height: 340px; 
    background-color: #818181; 
    float: left; 
} 

.comment_cont { 
    float: right; 
} 

는 그리고 이것은 내가 보이게하는 방법입니다. Accomplished with negative top margin이지만 댓글 div의 높이가 변경 될 수 있으므로이 방법은 저에게 적합하지 않습니다.

Answer 1

부모 요소에 display: flex과 align-items: flex-end을 사용할 수 있습니다.

.comments { 
 
    width: 320px; 
 
    height: 340px; 
 
    background-color: #818181; 
 
} 
 
.comment_cont { 
 
    float: right; 
 
    display: flex; 
 
    align-items: flex-end; 
 
}

<div class="comment_cont"> 
 
    <div class="button_div"> 
 
    <button>Button</button> 
 
    </div> 
 
    <div class="comments"></div> 
 
</div>