假设我有以下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中做到这一点?
当前回答
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
你的欢迎
其他回答
这是一种灵活的方法。当然，IE8不支持，7年前用户就需要了。根据您需要支持的内容，其中一些可以取消。
不过，如果有一种方法来做到这一点，没有一个外部容器，这将是很好的，只是让文本在它自己的自我对齐。
#header {
-webkit-box-align: end;
-webkit-align-items: flex-end;
-ms-flex-align: end;
align-items: flex-end;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
height: 150px;
}
我发现这个解决方案基于一个默认的引导启动模板
/* HTML */
<div class="content_wrapper">
<div class="content_floating">
<h2>HIS This is the header<br>
In Two Rows</h2>
<p>This is a description at the bottom too</p>
</div>
</div>
/* css */
.content_wrapper{
display: table;
width: 100%;
height: 100%; /* For at least Firefox */
min-height: 100%;
}
.content_floating{
display: table-cell;
vertical-align: bottom;
padding-bottom:80px;
}
对前面提到的其他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移到底部的最佳解决方案如下所示。 基本上，你需要做的是将display flex和flex-direction设置为父类的列，并将'margin-top: auto'添加到它的子类，该子类需要被浮动到容器的底部 注意:我已经使用了bootstrap及其类。
.box-wrapper { 身高:400 px; 边框:1px实心#000; 保证金:20 px; 显示:flex;//仅用于表示。引导默认类已经添加 flex-direction:列; ｝ .link-02 { margin-top:汽车; ｝ <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet" /> <div class="box-wrapper d-flex flex-column col-4"> <div>意外blanditiis debitis</div> < div class = " news-box”> <img class="d-block" alt="non ipsam nihil" src="https://via.placeholder.com/150"> <p>连续痛苦的分娩和面对的分娩</p> < / div > <a href="https://oscar.com" target="_blank" class="link-02"> 这是移动到底部与最小的努力 < / > < / div >
我刚刚为客户端做的网站要求页脚文本是一个高框，在底部的文本我实现了这个简单的填充，应该适用于所有浏览器。
<div id="footer">
some text here
</div>
#footer {
padding: 0 30px;
padding-top: 60px;
padding-bottom: 8px;
}
