如何将div移动到父div的底部？

Question

如何将红色div的底部与类test对齐，底部是右边的div？

https://jsfiddle.net/1Lujdru9/

HTML

<div>
    <div class="box">
        <div>sad
            <br/>sad
            <br/>sad
            <br/>
        </div>
        <div class="test">sad
            <br/>sad
            <br/>sad
            <br/>
        </div>
    </div>
    <div class="box">sad
        <br/>sad
        <br/>sad
        <br/>sad
        <br/>sad
        <br/>sad
        <br/>sad
        <br/>sad
        <br/>sad
        <br/>sad
        <br/>sad
        <br/>
    </div>
</div>

CSS

.box {
    display:inline-block;
    vertical-align:top;
}
.test {
    background-color:red;
}

Answer 1

一般情况我不建议，但根据您的情况，您可以将position: absolute和bottom: 0与课程.test一起与position: relative一起与父母一起（我添加父类.cont）的类。

.box {
  display: inline-block;
  vertical-align: top;
}
.test {
  background-color: red;
  position: absolute;/*add position absolute*/
  bottom: 0;/*add bottom 0*/
}
.cont {
  position: relative;/*add position relative to parent element*/
}

<div class="cont">
  <div class="box">
    <div>sad
      <br/>sad
      <br/>sad
      <br/>
    </div>
    <div class="test">sad
      <br/>sad
      <br/>sad
      <br/>
    </div>
  </div>
  <div class="box">sad
    <br/>sad
    <br/>sad
    <br/>sad
    <br/>sad
    <br/>sad
    <br/>sad
    <br/>sad
    <br/>sad
    <br/>sad
    <br/>sad
    <br/>sad
    <br/>sad
    <br/>
  </div>
</div>

Answer 2

Flexbox可以做到这一点：

.parent {
  display: inline-flex;
}
.box {
  background: #c0ffee;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.test {
  background-color: red;
}

<div class="parent">
  <div class="box">
    <div>sad
      <br/>sad
      <br/>sad
      <br/>
    </div>
    <div class="test">sad
      <br/>sad
      <br/>sad
      <br/>
    </div>
  </div>
  <div class="box">sad
    <br/>sad
    <br/>sad
    <br/>sad
    <br/>sad
    <br/>sad
    <br/>sad
    <br/>sad
    <br/>sad
    <br/>sad
    <br/>sad
    <br/>sad
    <br/>sad
    <br/>
  </div>
</div>