假设我有以下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添加行高，记住所有div的文本都将放在底部。
CSS:
#layer{width:198px;
height:48px;
line-height:72px;
border:1px #000 solid}
#layer a{text-decoration:none;}
HTML:
<div id="layer">
<a href="#">text at div's bottom.</a>
</div>
请记住，这是一个实用和快速的解决方案，当你只是想在div里的文本下去，如果你需要结合图像和东西，你将不得不编码一个更复杂的和响应性的CSS
其他回答
如果你可以设置内容的包装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;
}
在代码依赖上显示
2015的解决方案
<div style='width:200px; height:60px; border:1px solid red;'>
<table width=100% height=100% cellspacing=0 cellpadding=0 border=0>
<tr><td valign=bottom>{$This_text_at_bottom}</td></tr>
</table>
</div>
http://codepen.io/anon/pen/qERMdx
你的欢迎
如果您不担心遗留浏览器，可以使用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/
您可以简单地实现flex
标题{ 边框:1px纯蓝色; 身高:150 px; 显示:flex;/*定义flexbox */ flex-direction:列;/*从上到下*/ justify-content:之间的空间;/*开始的第一项，结束的最后一项*/ ｝ h1 { 保证金:0; ｝ <标题> <标题>标题< / h1 > 一些文本对齐到底部 头> < /
#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 >
