假设我有以下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中做到这一点?
当前回答
如果父元素/块元素的行高大于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;
}
*确保你在标准模式
其他回答
这里是另一个解决方案使用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 >
如果你有多个动态高度项，使用CSS显示table和table-cell的值:
HTML
<html>
<body>
<div class="valign bottom">
<div>
<div>my bottom aligned div 1</div>
<div>my bottom aligned div 2</div>
<div>my bottom aligned div 3</div>
</div>
</div>
</body>
</html>
CSS
html,
body {
width: 100%;
height: 100%;
}
.valign {
display: table;
width: 100%;
height: 100%;
}
.valign > div {
display: table-cell;
width: 100%;
height: 100%;
}
.valign.bottom > div {
vertical-align: bottom;
}
我在这里创建了一个JSBin演示:http://jsbin.com/INOnAkuF/2/edit
演示也有一个例子如何垂直中心对齐使用相同的技术。
对前面提到的其他flex-box解决方案的补充:
你可以在第一个div上使用flex-grow: 1 .这样，你的第二个div将与底部对齐，而第一个div将覆盖所有剩余空间。
在父div上，必须使用display: flex和flex-direction: column。
/* parent-wrapper div */
.container {
display: flex;
flex-direction: column;
}
/* first-upper div */
.main {
flex-grow: 1;
}
检查提琴:https://jsfiddle.net/1yj3ve05/
试一试:
div.myclass { margin-top: 100%; }
尝试更改%来修复它。例如:120%或90%等等。
您可以使用以下方法:
.header-parent { 身高:150 px; 显示:网格; ｝ .header-content { align-self:结束; ｝ < div class = " header-parent”> <标题>标题< / h1 > < div class = "标题内容”> 标题内容 < / div > < / div >
