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

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

其他回答

一个完美的跨浏览器的例子是:

http://www.csszengarden.com/?cssfile=/213/213.css&page=0

这个想法既要在底部显示div,也要让它粘在那里。通常,简单的方法会使粘滞的div与主要内容一起向上滚动。

下面是一个完全工作的最小示例。注意,这里不需要div嵌入技巧。许多br只是强迫滚动条出现:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #floater {
            background: yellow;
            height: 200px;
            width: 100%;
            position: fixed;
            bottom: 0px;
            z-index: 5;
            border-top: 2px solid gold;
        }

    </style>
</head>


<body>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>


    <div id="floater"></div>
</body>
</html>

如果你想知道你的代码可能不能在IE上工作,记得在顶部添加DOCTYPE标记。在IE上运行这是至关重要的。此外,这应该是第一个标签,上面不应该出现任何东西。

如果您不担心遗留浏览器,可以使用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/

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

将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 >

我使用这些属性,它工作!

#header {
  display: table-cell;
  vertical-align: bottom;
}