如何將div移動到父div的底部？

Question

如何對齊紅色div的底部與類test與右邊的底部？

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>