Question

请参阅我的fiddle位置。

在我的页面中，我想保持所有盒子都在同一高度。所以我在 box_left div中使用了display: table-cell;。我想在每个盒子里添加购物袋图标。这个购物袋图像固定在每个盒子的底部。但我不能。请解决我的问题。

我的css是：

.box_left {
    display: table-cell;
    width: 170px;
    border: 1px solid;
}

a img.shopping_bags{
    max-width:19px; 
    width:19px; 
    height:19px; 
    position:absolute; 
    margin:0px; 
    right:5px; 
    bottom:5px;
}

Answer 1

我已更新您的fiddle

.box_left {
   padding-bottom: 19px;
display: table-cell;
position: relative;
width: 170px;
background-color: !important;
border: 1px solid;
font-family: 'oswaldbook';
font-weight: normal;
}
a img.shopping_bags{ max-width:19px; width:19px; height:19px; position:absolute; margin:0px; right:5px; bottom:5px; }

.bags {
    position: absolute;
    bottom: 0;
}

Answer 2

只需将position:relative添加到box-left课程即可。您的HTML中也没有shopping_bags。所以在你的CSS中删除它。

.box_left {
display: table-cell;
width: 170px;
background-color: !important;
border: 1px solid;
font-family: 'oswaldbook';
font-weight: normal;
position:relative;
}
a img{ max-width:19px; width:19px; height:19px; position:absolute; margin:0px; right:5px; bottom:5px; }

DEMO

图像固定在盒子的底部

2 个答案: