0

我正在尝试创建一个响应迅速的宝丽来相框。问题是标题不会粘在底部边框上,它只是漂浮在图像上。

如果我使用像素而不是百分比它可以工作,但不是其他明智的。有任何想法吗 ?

小提琴

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;

}
4

2 回答 2

2

您所做的是不正确的,您在图像周围使用粗边框,这会阻止内部文本流过它,以实现您需要bottom为您的title

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

演示

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

于 2013-07-16T10:09:54.750 回答
1

将此添加到.imageContainer p声明中:

bottom: -40px;
于 2013-07-16T10:09:51.193 回答