在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正常工作，您需要添加display:inline元素的p

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