将另一个类中的div类对齐到底部

Question

我有一组嵌套在一起的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的底部对齐.

谢谢

Answer 1

你需要:

.thumbnail {
 position:relative;
}

.title {
  position:absolute;
  bottom: 0;
}