位置元素在图像上

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 - 图像底部的粉红色位

Answer 2

也许这就是你要找的东西

.item-title {
border:0px solid black;
padding: 0px;
float:left;
}

.item-right {
padding: 0px;
border:0px solid black;
float:right;
}