html - 带有由帖子信息覆盖的图像的特色文章容器

Question

我想要实现的目标似乎相对简单，但我似乎无法让它发挥作用。

我想让我网站上的文章预览以平铺形式显示。

为了论证，瓷砖将具有固定的高度和宽度。比方说 300 像素 x 300 像素。

然后我想要文章的标题，甚至可能是一个简短的摘录，覆盖在图像上。有点像 theverge.com 的内容。

我需要帮助的是，我只是想做一个概念验证模型。我自己可以很好地完成特定的样式设计，但它实际上只是我无法弄清楚的结构。

我似乎无法让 h1 覆盖 img。

我已经尝试创建一个父容器 div，然后将两个元素包含在单独的 div 容器中，并为容器提供 h1 或“post info”绝对定位。

但它似乎永远不会完全正确。

HTML:

<div class="container">

    <div class="feat-img">
        <img src="www.sample.com"/>
    </div>

    <div class="post-info">
        <h1>Post Title</h1>
    </div>

</div>

CSS:

.container: {width: 300px; height:300px;float:left;}

.feat-img img: {width:300px; height:300px; float:left;}

.post-info: {position:absolute;bottom:0px;}

好吧，我知道这种风格有很多问题，但我只是随随便便就做了。大致概括了我的思路。

任何帮助将不胜感激，因为我还没有找到任何东西(可能是因为我真的不知道我在寻找什么)

Answer 1

首先，您需要了解绝对 div 与相对 div 的关系。

添加

.feat-img {
    position:relative;
    height:300px;
    width:300px;
}

到你的 CSS，

并将 .post-info div 放在 .feat-img div 中:

<div class="feat-img">
  <div class="post-info">
    <h1>Post Title</h1>
   </div>  
   <img src="image.jpg"/>
 </div>

应用此 CSS:

.post-info {
    position:absolute;
    bottom:0px; /* or whatever position */
    left:0px; /* or whatever position */
}

请查看此 jsFiddle 以获得快速模型:http://jsfiddle.net/ZJT6f/

干杯，

杰伦