假设我有以下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中做到这一点?
当前回答
使用CSS定位:
/* Creates a new stacking context on the header */
#header {
position: relative;
}
/* Positions header-content at the bottom of header's context */
#header-content {
position: absolute;
bottom: 0;
}
正如cletus所指出的，您需要确定头内容来完成这项工作。
<span id="header-content">some header content</span>
<div style="height:100%; position:relative;">
<div style="height:10%; position:absolute; bottom:0px;">bottom</div>
</div>
其他回答
如果父元素/块元素的行高大于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;
}
*确保你在标准模式
似乎起作用了:
#content {
/* or just insert a number with "px" if you're fighting CSS without lesscss.org :) */
vertical-align: -@header_height + @content_height;
/* only need it if your content is <div>,
* if it is inline (e.g., <a>) will work without it */
display: inline-block;
}
使用较少使解决CSS谜题更像编码而不是像…我就是喜欢CSS。这是一个真正的乐趣，当你可以改变整个布局(而不破坏它:)只是改变一个参数。
对前面提到的其他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的高度(#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;
}
在代码依赖上显示
