將另一個類中的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;
}

Answer 2

由於您的.thumbnail具有固定的高度，因此我本人可以絕對定位.title 。

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

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

我注意到只有第一組具有.title div，我不知道您是否忘記了它們，或者是否是設計.title 。