html - 在图像上定位元素

Question

我试图在图像上放置一些元素，同时保持以下行为:

• 在移动设备中停止向右浮动 “muuh” 文本
• 保持文字与图片底部对齐
• .item div 大小不能大于图片

到目前为止我取得的成就:http://jsfiddle.net/wn6M9/14/

目前这不起作用，正如您在 div 背景中看到的那样，文本也没有与图片底部对齐。

Answer 1

你的意思是这样的吗？

JSFiddle

我将 CSS 更改为:

.masonry {
    position: relative;
}

.item {
    width: 20%;
    position: relative;
}

.item-image {
    width: 100%;
}

.item-text {
    background: pink;
    position: absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    margin: auto;
    width:100%;
    height:20px;
}

.item-title {
    padding: 0px;
}

.item-right {
    padding: 0px;
}

@media(min-width:992px){
    .item-creator {
        float: right !important;   
    }
}

JSFiddle 2 - 图像底部的粉红色位