[英]Vertically align last element in a div
我試圖使類的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;
}
您可以相對於其父.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*/
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.