将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>