假设我有以下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中做到这一点?


当前回答

这里是另一个解决方案使用flexbox,但没有使用flex-end底部对齐。这个想法是在h1上设置margin-bottom,以自动将剩余的内容推到底部:

#标题{ 身高:350 px; 显示:flex; flex-direction:列; 边界:1 px固体; } #标题h1 { margin-bottom:汽车; } < div id = "头" > <标题>标题< / h1 > 页眉内容(一行或多行)页眉内容(一行或多行)页眉内容(一行或多行)页眉内容(一行或多行) < / div >

我们也可以对文本的margin-top:auto做同样的事情,但在这种情况下,我们需要将它包装在div或span中:

#标题{ 身高:350 px; 显示:flex; flex-direction:列; 边界:1 px固体; } #头span { margin-top:汽车; } < div id = "头" > <标题>标题< / h1 > <span>标头内容(一行或多行)</span> < / div >

其他回答

我使用这些属性,它工作!

#header {
  display: table-cell;
  vertical-align: bottom;
}

如果你可以设置内容的包装div的高度(#header-content,如other's reply所示),而不是整个#header,也许你也可以尝试这种方法:

HTML

<div id="header">
    <h1>some title</h1>
    <div id="header-content">
        <span>
            first line of header text<br>
            second line of header text<br>
            third, last line of header text
        </span>
    </div>
</div>

CSS

#header-content{
    height:100px;
}

#header-content::before{
  display:inline-block;
  content:'';
  height:100%;
  vertical-align:bottom;
}

#header-content span{
    display:inline-block;
}

在代码依赖上显示

如果父元素/块元素的行高大于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;
}

*确保你在标准模式

您可以使用以下方法:

.header-parent { 身高:150 px; 显示:网格; } .header-content { align-self:结束; } < div class = " header-parent”> <标题>标题< / h1 > < div class = "标题内容”> 标题内容 < / div > < / div >

试一试:

div.myclass { margin-top: 100%; }

尝试更改%来修复它。例如:120%或90%等等。