Question

我有一个图像，我想在底部显示带有一些文字的DIV。我知道这很简单，但由于这是一个移动网站，并且所有图像都是不同的尺寸，我必须使其100％宽度，这使得所有东西都会混淆你的浮动图像等等。

这就是我现在所拥有的：

HTML

<div class='individual_picture_capption_wrapper'>
<div class='individual_picture_capption_wrapper_two'>
<div class='individual_picture_caption_wrapper_three'><div class='individual_picture_caption'>Some Caption Here</div></div>
<img src='http://myflashpics.com/get_image.php?short_string=8ibjr&size=big' class='individual_picture_big' />
</div>
</div>

CSS

.individual_picture_caption {
    padding: 12px 10px 12px 10px;
    font-size: 13px;
    text-align: center;
}
.individual_picture_capption_wrapper {
    position: relative;
    background-color: #ffffff;
}
.individual_picture_capption_wrapper_two {
    margin-left: 0px;
    background-color: #cccccc;
}
.individual_picture_caption_wrapper_three {
    float: left;
    position:absolute;
    width: 100%;
    left: 0;
    background-image: url('http://myflashpics.com/viewer/images/transparent_black_70.png');
    -moz-border-radius: 3px;
    border-radius: 3px;
    color: #ffffff;
    margin: 15px 30px 15px 15px;
}

我的问题是我希望它漂浮在底部并且标题悬在边缘上。我知道这是因为左边的边距。

请帮忙！我不知道从哪里开始。如果您希望它在实际中看到它，click here。

谢谢！

Answer 1

如果您想要底部的标题，您需要以这种方式修改CSS的边距和位置：

.individual_picture_caption_wrapper_three {
    margin: 0 0 7px 7px;
    bottom:0;
}

Answer 2

抓住边际;添加bottom:15px;并设置width:auto; left:20px; right:10px

使用CSS添加叠加到图像？

2 个答案: