0

親divの下部にあるa<div>をその内側に揃えようとしています。<h2>コードを使用するのが最善の方法なので、JSFiddleの例を次に示します。http：//jsfiddle.net/3GGa7/

ご覧のとおり、project-titlediv（およびその<h2>内部）はproject-headerdivの上部に配置されています。私はそれをそのdivの一番下に沈めて、次のようにしたいと思います：

ここに画像の説明を入力してください

ただし、aを適用するmargin-topとproject-title、そのdivだけでなくすべてが押し下げられ、パディングを適用すると、黒い背景が画像を覆います。

これを達成するための最もエレガントな方法は何ですか？

4

4 に答える 4

1

.project-titleは内に含まれている必要があるため.project-header、.project-headeraposition:relative;と.project-titleaを指定します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/をチェックしてください

このように、より大きな画像を使用する場合でも、その位置や余白を変更する場合でも、タイトルを気にする必要はありません。常に本来あるべき場所に配置されます。

于 2013-01-27T16:58:33.720 に答える
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-headerdivを開始する前にdivをproject-title閉じるだけです。

<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はこちら

于 2013-01-27T16:55:29.917 に答える
0

widthの設定を気にしない場合.project-header 

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

変更されたJSFiddle

于 2013-01-27T17:00:46.213 に答える