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

Question

我正在尝试在父div的底部将<div>与<h2>对齐。向您展示的最佳方式是通过代码，所以这里是JSFiddle示例：http://jsfiddle.net/3GGa7/

如您所见，project-title div（及其中的<h2>）与project-header div的顶部对齐。我希望它沉到那个div的底部，看起来像这样：

但是，如果我将margin-top应用于project-title，它会将所有内容推下来而不仅仅是该div，如果我应用填充，则黑色背景将覆盖图像。

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

Answer 1

由于.project-title必须包含在.project-header中，因此.project-header一个position:relative;和.project-title一个position:absolute;

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

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

查看http://jsfiddle.net/gXyEU/

这样，无论您使用更大的图像，还是更改其位置或边距，您都不必担心标题，它将始终位于应有的位置。

Answer 2

如果图片尺寸稳定。您可以尝试下面的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;

}

Answer 3

在开始project-header div之前关闭project-title 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>

FIDDLE是here

Answer 4

如果您不介意设置width

的.project-header

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

修改后的JSFiddle