位置元素

Question

我试图同时保持以下行为在图像上的一些元素的位置：

• 当移动停止浮动"muuh"文本向右
• 保持文本与底部对齐图像的
• 的.itemdiv大小应不大于图像

是我到目前为止已经取得了更大： 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; 
}