在DIV的顶部和底部对齐

Question

我有一些文本和一个按钮的DIV。 我需要：

• 对齐DIV底部的按钮
• 在DIV顶部对齐文本

这是我想要的图像：

我有的代码：

HTML：

<div class="table">
    <div class="cell">
        <p>Some text</p>
        <a type="button" class="btn" href="#">Button</a>
    </div>
    <div class="cell">
        <p>The big one text</p>
        <a type="button" class="btn" href="#">Button</a>
    </div>
    <div class="cell">
        <p>Some small text</p>
        <a type="button" class="btn" href="#">Button</a>
    </div>
</div>

CSS：

.table {
    display: table;
}
.cell {
    float: none;
    display: table-cell;
    height: auto;
}
.cell .btn {
    vertical-align: bottom;
}

任何想法如何做到这一点？

Answer 1

DEMO

   .cell p{
    vertical-align: top;
    display:inline;
}

.cell .btn {
    display:block;
    vertical-align: bottom;
}

注意：我添加了两个display属性以及vertical-alignment ，因为p总是以换行符开头，因此为了使vertcal-alignment:top起作用，您需要为p元素添加display:inline

Answer 2

.table {
    display: table;
}
.cell {
    display: table-cell;
    height: auto;
    border:1px solid black;
    padding-bottom:40px;
    position:relative;
}
.cell .btn {
    vertical-align: bottom;
    position:absolute;
    bottom:0px;
}

DEMO

尝试这个。 根据您的按钮高度调整填充

Answer 3

DEMO

试试这个，这是最简单的，只需复制粘贴即可替换您的代码

Answer 4

采用：

.cell .btn {
    position: absolute;
    bottom: 0px;
}