垂直对齐div中的最后一个元素

Question

我试图使类的type垂直于底部对齐，但我的尝试一直失败。 也许有人可以推荐我一个更好的方法？ 我不能使盒子变小，因为其余的div高度都相等。

HTML：

<div class="medium_container">
    <div class="medium_item">
        <a href=""><img src="http://placehold.it/170x100"></a>
        <div class="medium">111111111</div>
        <div class="brand">22222222</div>
        <div class="titles">333333333</div>
        <div class="country">44444444<br />444444444</div>
        <span class="type">55555555555</span>
    </div>
</div>

CSS：

.medium_container {display:block;}
.medium_item {
display: inline-block;
padding:7px;
margin:10px 3px;
width:170px;
border:1px solid black;
height:400px;
}
.medium_item img {
width:170px;
height:100px;
}
.type {
vertical-align: bottom;
display: table-cell;
}

的jsfiddle

Answer 1

您可以相对于其父.medium_item绝对定位.type ，如下所示

.medium_item {
  position:relative; /*add this*/
  display: inline-block;
  padding:7px;
  margin:10px 3px;
  width:170px;
  border:1px solid black;
  height:400px;
}
.type {
  display: table-cell;
  vertical-align: bottom;
  position:absolute; /*add this*/
  bottom:0; /*add this*/
}

更新的小提琴