如何将一个div的内容对齐到底部

假设我有以下CSS和HTML代码:

#标题{ 身高:150 px; ｝ < div id = "头" > <标题>标题< / h1 > 标题内容(一行或多行) < / div >

标题部分是固定的高度，但标题内容可能会改变。

我想要标题的内容垂直对齐到标题部分的底部，所以最后一行文本“粘”到标题部分的底部。

所以如果只有一行文本，它会像这样:

-----------------------------
| Header title
|
|
|
| header content (resulting in one line)
-----------------------------

如果有三行:

-----------------------------
| Header title
|
| header content (which is so
| much stuff that it perfectly
| spans over three lines)
-----------------------------

如何在CSS中做到这一点?

当前回答

我想出了一个比上面提到的简单得多的方法。

设置标题div的高度。然后在里面，样式H1标签如下:

float: left;
padding: 90px 10px 11px

我在一个客户的网站上工作，设计要求文本在某个div的底部。我已经使用这两行实现了结果，它工作得很好。此外，如果文本确实展开，填充将保持不变。

2011-08-11 15:33:28

其他回答

如果父元素/块元素的行高大于Inline元素的行高，Inline或Inline块元素可以对齐到块级元素的底部

标记:

<h1 class="alignBtm"><span>I'm at the bottom</span></h1>

css:

h1.alignBtm {
  line-height: 3em;
}
h1.alignBtm span {
  line-height: 1.2em;
  vertical-align: bottom;
}

*确保你在标准模式

2012-12-04 22:16:43

这是一种灵活的方法。当然，IE8不支持，7年前用户就需要了。根据您需要支持的内容，其中一些可以取消。

不过，如果有一种方法来做到这一点，没有一个外部容器，这将是很好的，只是让文本在它自己的自我对齐。

#header {
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 150px;
}

2016-06-07 20:33:12

相对+绝对定位是你最好的选择:

#标题{ 位置:相对; 最小高度:150 px; ｝ #标题内容{ 位置:绝对的; 底部:0; 左:0; ｝ #header， #header * { 背景:rgba(40,40,100,0.25); ｝ < div id = "头" > h1标题< h1 > < / > 在最后一个地方，情况可能不是这样，他们会长期存在，会深深地扎根，不会轻易被铲除。修改宪法的计划，为了纠正最近的违反宪法的行为，以及其他目的，实际上已经在一个州尝试过了 < / div >

但你可能会遇到问题。当我尝试它时，我遇到了下拉菜单出现在内容下面的问题。这并不漂亮。

老实说，对于垂直定心问题，以及任何与物品的垂直对齐问题都不是固定高度的问题，使用表格更容易。

例子:你可以不使用表格来做这个HTML布局吗?

2009-02-25 13:20:01

我想出了一个比上面提到的简单得多的方法。

设置标题div的高度。然后在里面，样式H1标签如下: