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，我不知道你是否忘了它们，或者这是否是设计的。

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

2 个答案: