假设我有以下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中做到这一点?
当前回答
我发现这个解决方案基于一个默认的引导启动模板
/* 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;
}
其他回答
如果您不担心遗留浏览器，可以使用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/
似乎起作用了:
#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。这是一个真正的乐趣，当你可以改变整个布局(而不破坏它:)只是改变一个参数。
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
你的欢迎
我使用这些属性，它工作!
#header {
display: table-cell;
vertical-align: bottom;
}
现代的方法是使用flexbox。请参阅下面的示例。你甚至不需要一些文本…因为直接包含在伸缩容器中的文本被包装在匿名伸缩项中。
标题{ 边框:1px纯蓝色; 身高:150 px; 显示:flex;/*定义flexbox */ flex-direction:列;/*从上到下*/ justify-content:之间的空间;/*开始的第一项，结束的最后一项*/ ｝ h1 { 保证金:0; ｝ <标题> <标题>标题< / h1 > 一些文本对齐到底部 头> < /
如果只有一些文本，你想垂直对齐到容器的底部。
节{ 边框:1px纯蓝色; 身高:150 px; 显示:flex;/*定义flexbox */ 对齐项目:flex-end;/*盒子底部*/ ｝ 一些文本对齐到底部</section>
