假设我有以下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
div.parent {
display: flex;
height: 100%;
}
然后将子元素的align-self设置为flex-end。
span.child {
display: inline-block;
align-self: flex-end;
}
以下是我曾经学习过的资源: http://css-tricks.com/snippets/css/a-guide-to-flexbox/
其他回答
#header {
height: 150px;
display:flex;
flex-direction:column;
}
.top{
flex: 1;
}
<div id="header">
<h1 class="top">Header title</h1>
Header content (one or multiple lines)
</div>
#标题{ 身高:250 px; 显示:flex; flex-direction:列; 背景颜色:黄色; ｝ .top { flex: 1; ｝ < div id = "头" > <h1 class="top">头标题</h1> 标题内容(一行或多行) < / div >
试一试:
div.myclass { margin-top: 100%; }
尝试更改%来修复它。例如:120%或90%等等。
使用CSS定位:
/* Creates a new stacking context on the header */
#header {
position: relative;
}
/* Positions header-content at the bottom of header's context */
#header-content {
position: absolute;
bottom: 0;
}
正如cletus所指出的，您需要确定头内容来完成这项工作。
<span id="header-content">some header content</span>
<div style="height:100%; position:relative;">
<div style="height:10%; position:absolute; bottom:0px;">bottom</div>
</div>
所有这些答案，没有一个对我有用……我不是flexbox专家，但这很容易理解，很容易理解和使用。要将某些内容与其余内容分开，请插入一个空div，并让它增长以填充空间。
https://jsfiddle.net/8sfeLmgd/1/
.myContainer {
display: flex;
height: 250px;
flex-flow: column;
}
.filler {
flex: 1 1;
}
<div class="myContainer">
<div>Top</div>
<div class="filler"></div>
<div>Bottom</div>
</div>
当底部内容的大小不固定时，当容器的大小不固定时，这种反应就像预期的那样。
如果你可以设置内容的包装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;
}
在代码依赖上显示
