假设我有以下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/
其他回答
我想出了一个比上面提到的简单得多的方法。
设置标题div的高度。然后在里面，样式H1标签如下:
float: left;
padding: 90px 10px 11px
我在一个客户的网站上工作，设计要求文本在某个div的底部。我已经使用这两行实现了结果，它工作得很好。此外，如果文本确实展开，填充将保持不变。
试一试:
div.myclass { margin-top: 100%; }
尝试更改%来修复它。例如:120%或90%等等。
所有这些答案，没有一个对我有用……我不是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>
当底部内容的大小不固定时，当容器的大小不固定时，这种反应就像预期的那样。
现代的方法是使用flexbox。请参阅下面的示例。你甚至不需要一些文本…因为直接包含在伸缩容器中的文本被包装在匿名伸缩项中。
标题{ 边框:1px纯蓝色; 身高:150 px; 显示:flex;/*定义flexbox */ flex-direction:列;/*从上到下*/ justify-content:之间的空间;/*开始的第一项，结束的最后一项*/ ｝ h1 { 保证金:0; ｝ <标题> <标题>标题< / h1 > 一些文本对齐到底部 头> < /
如果只有一些文本，你想垂直对齐到容器的底部。
节{ 边框:1px纯蓝色; 身高:150 px; 显示:flex;/*定义flexbox */ 对齐项目:flex-end;/*盒子底部*/ ｝ 一些文本对齐到底部</section>
对前面提到的其他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/
