假设我有以下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中做到这一点?
当前回答
你不需要绝对+相对。对于容器和数据都使用相对位置是非常可能的。这就是你要做的。
假设你的数据高度是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.myclass { margin-top: 100%; }
尝试更改%来修复它。例如:120%或90%等等。
似乎起作用了:
#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
你的欢迎
display: flex;
align-items: flex-end;
一个非常简单的单行解决方案是为div添加行高，记住所有div的文本都将放在底部。
CSS:
#layer{width:198px;
height:48px;
line-height:72px;
border:1px #000 solid}
#layer a{text-decoration:none;}
HTML:
<div id="layer">
<a href="#">text at div's bottom.</a>
</div>
请记住，这是一个实用和快速的解决方案，当你只是想在div里的文本下去，如果你需要结合图像和东西，你将不得不编码一个更复杂的和响应性的CSS
