假设我有以下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中做到这一点?


当前回答

display: flex;
align-items: flex-end;

其他回答

使用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>

试一试:

div.myclass { margin-top: 100%; }

尝试更改%来修复它。例如:120%或90%等等。

如果你有多个动态高度项,使用CSS显示table和table-cell的值:

HTML

<html>
<body>

  <div class="valign bottom">
    <div>

      <div>my bottom aligned div 1</div>
      <div>my bottom aligned div 2</div>
      <div>my bottom aligned div 3</div>

    </div>
  </div>

</body>
</html>

CSS

html,
body {
  width: 100%;
  height: 100%;
}
.valign {
  display: table;
  width: 100%;
  height: 100%;
}
.valign > div {
  display: table-cell;
  width: 100%;
  height: 100%;
}
.valign.bottom > div {
  vertical-align: bottom;
}

我在这里创建了一个JSBin演示:http://jsbin.com/INOnAkuF/2/edit

演示也有一个例子如何垂直中心对齐使用相同的技术。

我想出了一个比上面提到的简单得多的方法。

设置标题div的高度。然后在里面,样式H1标签如下:

float: left;
padding: 90px 10px 11px

我在一个客户的网站上工作,设计要求文本在某个div的底部。我已经使用这两行实现了结果,它工作得很好。此外,如果文本确实展开,填充将保持不变。

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

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