如何将一个div的内容对齐到底部

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

当前回答

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

2018-02-01 13:17:23

其他回答

试一试:

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

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

2013-01-21 03:46:31

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

你的欢迎

2015-01-10 22:56:34

如果父元素/块元素的行高大于Inline元素的行高，Inline或Inline块元素可以对齐到块级元素的底部

标记:

<h1 class="alignBtm"><span>I'm at the bottom</span></h1>

css:

h1.alignBtm {
  line-height: 3em;
}
h1.alignBtm span {
  line-height: 1.2em;
  vertical-align: bottom;
}

*确保你在标准模式

2012-12-04 22:16:43

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

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上运行这是至关重要的。此外，这应该是第一个标签，上面不应该出现任何东西。

2011-08-11 21:12:44