將div的底部對齊到同一水平

Question

有什麼方法可以讓評論div底部到同一水平的按鈕底線？

這是它現在的工作原理。 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>