0

我有一组相互嵌套的 div，但我正在努力将文本和它的容器对齐到它的父 div 的底部。

这是代码：

<div id="frontpage-Button-Cont">
<div id="Align-content">
<div class="button-cont">
<div class="thumbnail"><div class="title">PS</div></div>
<div class="paragraph">
<div class="pheader">HEADER</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>

</div>
<div class="button-cont">
<div class="thumbnail red">PS</div>
<div class="paragraph">
<div class="pheader">HEADER</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

</div>
</div>
<div class="button-cont">
<div class="thumbnail orange">PS</div>
<div class="paragraph">
<div class="pheader">HEADER</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

</div>
</div>
<div class="button-cont">
<div class="thumbnail green">PS</div>
<div class="paragraph">
<div class="pheader">HEADER</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

</div>
</div>
</div>
</div>

.button-cont {
    width: 175px;
    /*background: blue;*/
    float: left;
    padding-left: 35px;
    margin-top: 10px;
    height: 250px;
}

.thumbnail {
    color: #fff;
    font-size: 12px;
    background: #1f4e9b;
    width: 175px;
    height: 135px;
    text-align: center;

}
.pheader {
    color: #DC143C;
    min-width: 175px;
    text-align: center;


}
.paragraph {
    text-align: center;
}
.green {

background-color: green;

}

.red {

background-color: red;

}


.orange {

background-color: orange;

}

例子：

http://jsfiddle.net/Rtd82/

我基本上希望 PS 与 div 的底部对齐。

谢谢

4

2 回答 2

6

你需要：

.thumbnail {
 position:relative;
}

.title {
  position:absolute;
  bottom: 0;
}
于 2013-11-07T15:20:50.650 回答
2

由于你.thumbnail的高度是固定的，我自己会在.title.

http://jsfiddle.net/Rtd82/1/

.title {
    position:absolute;
    bottom:0;
    width:100%;
}

我注意到只有第一组有.titlediv，我不知道你是否忘记了它们，或者这是设计使然。

于 2013-11-07T15:20:20.593 回答