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

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

.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*/
}

Updated Fiddle

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

1 个答案: