Html 在父图元底部对齐图元时出现问题

我试图将

与父div底部的

对齐。最好的方式是通过代码来显示，因此下面是JSFIDLE示例：

如您所见，

项目标题

div（及其内部的

）与

项目标题

div的顶部对齐。我希望它下沉到该div的底部，如下所示：

但是，如果我将

页边空白顶部

应用于

项目标题

，它会将所有内容向下推，而不仅仅是该div，如果我应用填充，黑色背景将覆盖图像

---

实现这一点最优雅的方法是什么？

如果您的图片大小稳定。您可以尝试以下css：

.project {
    width: 335px;
    float: left;
    border: 1px solid #ccc;
    border-radius: 6px;
}

.project-header {
    height: 100px;
}

.project-title {
    background: black;
    opacity: 0.75;
    float:left;
    width:100%;
        margin-top:25%;
}

.project-title h2 {
    color: #fff;
    margin-bottom:0px;
    float:left;

}

---

只需在

项目标题开始之前关闭
项目标题
div

<div class="project">
    <div class="project-header" style="background-image:url('http://placekitten.com/200/300');" ></div>
        <div class="project-title">
            <h2>Project title</h2>
        </div>

    <div class="project-description">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ornare felis id enim dignissim dapibus. Maecenas dui mi, ullamcorper eget semper non, varius quis orci. Suspendisse lobortis nibh sed nisi luctus dictum. Sed vel arcu eros. Etiam id varius neque. Cras ac sapien in est fringilla tempor vitae et est.</p>
    </div>
</div>


项目名称
Lorem ipsum dolor sit amet，是一位杰出的献身者。那是一只高贵的猫。我是一个酒鬼，我是一个酒鬼。大叶悬钩子。塞德·韦尔阿尔库·厄罗斯。艾蒂亚姆·伊德瓦里乌斯·内克。我是一个聪明的人，我的生命是短暂的


FIDDLE是，因为
中必须包含
项目标题
。项目标题
，给
项目标题
一个
位置：相对
和
项目标题
a
位置：绝对

.project-header {
    height: 100px;
    position:relative;;
}

.project-title {
    background: black;
    opacity: 0.75;
    position:absolute;
    bottom:0px;
    left:0px;
    right:0px;
}

看看

这样，无论您使用更大的图像，还是更改其位置或边距，您都不必担心标题，它将始终位于它应该位于的位置。
如果您不介意设置
的
宽度
。项目标题

.project-header {
    width: 335px;
    height: 100px;
    display: table-cell;
    vertical-align: bottom;
}

修改