Как переместить 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>