簡體   English   中英

垂直對齊div中的最后一個元素

[英]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;
}

的jsfiddle

您可以相對於其父.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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM