0

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

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

在此处输入图像描述

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

完成此任务的最优雅方法是什么？

4

4 回答 4

1

由于.project-title必须包含在 中.project-header，因此给出.project-headeraposition:relative;和.project-titleaposition: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/

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

于 2013-01-27T16:58:33.720 回答
0

如果你不介意width设置.project-header 

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

修改后的 JSFiddle

于 2013-01-27T17:00:46.213 回答
0

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

}
于 2013-01-27T16:55:13.430 回答
0

project-header只需在div 开始之前关闭你的project-titlediv 就像

<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>

小提琴在这里

于 2013-01-27T16:55:29.917 回答