假设我有以下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中做到这一点?
当前回答
您可以使用以下方法:
.header-parent { 身高:150 px; 显示:网格; ｝ .header-content { align-self:结束; ｝ < div class = " header-parent”> <标题>标题< / h1 > < div class = "标题内容”> 标题内容 < / div > < / div >
其他回答
我使用这些属性，它工作!
#header {
display: table-cell;
vertical-align: bottom;
}
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和margin-bottom: auto的组合。以下是我个人收集的文本底部可能性:
1. Flex / margin-top: auto;
.parent { 最小高度:200 px; 背景:绿色; 显示:flex; ｝ .child { margin-top:汽车; 背景:红色; 填充:5 px; 颜色:白色; ｝ < div class = "父" > <div class="child">底部文本</div> < / div >
2. Flex / align-self: Flex -end
.parent { 显示:flex; 最小高度:200 px; 背景:绿色; ｝ .child { align-self: flex-end; 背景:红色; 填充:5 px; 颜色:白色; ｝ < div class = "父" > <div class="child">底部文本</div> < / div >
3.Flex / align-items: Flex -end;
.parent { 最小高度:200 px; 背景:绿色; 显示:flex; 对齐项目:flex-end; ｝ .child { 填充:5 px; 背景:红色; 颜色:白色; ｝ < div class = "父" > <div class="child">底部文本</div> < / div >
4. Grid / align-self:结束;
.parent { 最小高度:200 px; 背景:绿色; 显示:网格; } .child { align-self:结束; 背景:红色; 填充:5 px; 颜色:白色; } < div class = "父" > <div class="child">底部文本</div> < / div >
5. 表/垂直对齐:底部;
就个人而言，我不喜欢这种处理表格的方法。
.parent { 最小高度:200 px; 背景:绿色; 显示:表; 宽度:100%; ｝ .child { 显示:表格单元; vertical-align:底部; 背景:红色; 填充:5 px; 颜色:白色; ｝ < div class = "父" > <div class="child">底部文本</div> < / div >
用垫片
6. Flex;/ flex: 1;
.parent { 最小高度:200 px; 背景:绿色; 显示:flex; flex-flow:列; ｝ .spacer { flex: 1; ｝ .child { 填充:5 px; 背景:红色; 颜色:白色; ｝ < div class = "父" > < div class = "隔离" > < / div > <div class="child">底部文本</div> < / div >
7. Flex / Flex -grow: 1;
.parent { 最小高度:200 px; 背景:绿色; 显示:flex; flex-direction:列; ｝ .spacer { flex-grow: 1; ｝ .child { 填充:5 px; 背景:红色; 颜色:白色; ｝ < div class = "父" > < div class = "隔离" > < / div > <div class="child">底部文本</div> < / div >
8. Inline-block / PseudoClass::before
.parent { 最小高度:200 px; 背景:绿色; ｝ {前.child:: 显示:inline-block; 内容:”; 高度:100%; vertical-align:底部; ｝ .child { 身高:200 px; 填充:5 px; 背景:红色; 颜色:白色; ｝ < div class = "父" > <div class="child">底部文本</div> < / div >
❤️我个人比较喜欢的版本是:， 2. 和3。
你不需要绝对+相对。对于容器和数据都使用相对位置是非常可能的。这就是你要做的。
假设你的数据高度是x。你的容器是相对的，页脚也是相对的。你所要做的就是添加你的数据
bottom: -webkit-calc(-100% + x);
您的数据将始终位于容器的底部。即使你有动态高度的容器也能工作。
HTML是这样的
<div class="container">
<div class="data"></div>
</div>
CSS是这样的
.container{
height:400px;
width:600px;
border:1px solid red;
margin-top:50px;
margin-left:50px;
display:block;
}
.data{
width:100%;
height:40px;
position:relative;
float:left;
border:1px solid blue;
bottom: -webkit-calc(-100% + 40px);
bottom:calc(-100% + 40px);
}
这里有一个活生生的例子
希望这能有所帮助。
我刚刚为客户端做的网站要求页脚文本是一个高框，在底部的文本我实现了这个简单的填充，应该适用于所有浏览器。
<div id="footer">
some text here
</div>
#footer {
padding: 0 30px;
padding-top: 60px;
padding-bottom: 8px;
}
