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

Question

I have a set of divs nested within each other but I'm struggling to align the text and it's container to the bottom of it's parent div.

Here's the code:

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

}

Example:

http://jsfiddle.net/Rtd82/

I basically would like the PS aligned to the bottom of the div.

Thanks

Answer 1

You need:

.thumbnail {
 position:relative;
}

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

Answer 2

Since your .thumbnail has a fixed height, I myself would go with absolute positioning on the .title .

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

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

I noticed only the first group has the .title div, I don't know if you forgot them or if this was by design.