html - 边框底部的位置标题

Question

我正在尝试创建具有响应能力的宝丽来外观相框。 问题是标题不会粘在底部边框上，它只是浮​​在图像上。

如果我使用像素而不是百分比，它可以工作，但不是其他方式。 有什么想法吗？

the fiddle

HTML

<div class="imageContainer">
  <img src="http://photogallery.indiatimes.com/beauty-pageants/miss-india/rochelle-maria-raos-photo-shoot/photo/16651703/Miss-India-International-Rochelle-Maria-Rao-during-her-photo-shoot-.jpg" />
    <p> Title</p>
</div>

CSS

.imageContainer {
    position: relative;
    width: 25%;
    padding-bottom: 25%;
    float: left;
    height: 0;
    margin-right:10px;
    border:10px solid #e3e3e3;
    border-bottom:30px solid #e3e3e3;
}

.imageContainer img {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
}
.imageContainer p{
    position:absolute;

}

Answer 1

你在做什么是不正确的，你在图像周围使用了粗边框，这会阻止内部文本流过它，为了实现这一点，你需要为你的 bottom 使用负值标题

.imageContainer p{
    position:absolute;
    bottom: -40px;
}

Demo

我建议您使用 display: inline-block; li 元素和嵌套的 div & img 而不是这种方法 标签，div 具有固定的高度和 img 具有固定的 min height 和 width 您的标题元素位于 absolute at bottom 0