假设我有以下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

你的欢迎

其他回答

所有这些答案,没有一个对我有用……我不是flexbox专家,但这很容易理解,很容易理解和使用。要将某些内容与其余内容分开,请插入一个空div,并让它增长以填充空间。

https://jsfiddle.net/8sfeLmgd/1/

.myContainer {
  display: flex;
  height: 250px;
  flex-flow: column;
}

.filler {
  flex: 1 1;
}

<div class="myContainer">
  <div>Top</div>
  <div class="filler"></div>
  <div>Bottom</div>
</div>

当底部内容的大小不固定时,当容器的大小不固定时,这种反应就像预期的那样。

我刚刚为客户端做的网站要求页脚文本是一个高框,在底部的文本我实现了这个简单的填充,应该适用于所有浏览器。

<div id="footer">
  some text here
</div>
#footer {
  padding: 0 30px;
  padding-top: 60px;
  padding-bottom: 8px;
}

一个非常简单的单行解决方案是为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

您可以简单地实现flex

标题{ 边框:1px纯蓝色; 身高:150 px; 显示:flex;/*定义flexbox */ flex-direction:列;/*从上到下*/ justify-content:之间的空间;/*开始的第一项,结束的最后一项*/ } h1 { 保证金:0; } <标题> <标题>标题< / h1 > 一些文本对齐到底部 头> < /

这里是另一个解决方案使用flexbox,但没有使用flex-end底部对齐。这个想法是在h1上设置margin-bottom,以自动将剩余的内容推到底部:

#标题{ 身高:350 px; 显示:flex; flex-direction:列; 边界:1 px固体; } #标题h1 { margin-bottom:汽车; } < div id = "头" > <标题>标题< / h1 > 页眉内容(一行或多行)页眉内容(一行或多行)页眉内容(一行或多行)页眉内容(一行或多行) < / div >

我们也可以对文本的margin-top:auto做同样的事情,但在这种情况下,我们需要将它包装在div或span中:

#标题{ 身高:350 px; 显示:flex; flex-direction:列; 边界:1 px固体; } #头span { margin-top:汽车; } < div id = "头" > <标题>标题< / h1 > <span>标头内容(一行或多行)</span> < / div >