如何将div的内容与底部对齐？-Java 学习之路

999

说我有以下CSS和HTML代码：

#header {
  height: 150px;
}

<div id="header">
  <h1>Header title</h1>
  Header content (one or multiple lines)
</div>

Headers 部分是固定高度，但 Headers 内容可能会更改 . 我想将 Headers 的内容垂直对齐到 Headers 部分的底部，因此最后一行文本“粘贴”到 Headers 部分的底部 .

因此，如果只有一行文字，那就像：

-----------------------------
| 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中完成？

24 回答

138
你不需要绝对的亲戚 . 很可能使用容器和数据的相对位置 . 这就是你如何做到的 .

假设您的数据高度为 x . 你的容器是相对的，页脚也是相对的 . 您所要做的就是添加数据
```
bottom: -webkit-calc(-100% + x);
```
您的数据将始终位于容器的底部 . 即使你有动态高度的容器也可以工作 .

HTML will be like this
```
<div class="container">
  <div class="data"></div>
</div>
```
CSS will be like this
```
.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);
}
```
Live example here

希望这可以帮助 .
回复于 2024-05-13T04:13:13+08:00
-8
这是一种灵活的方式 . 当然，IE8不支持它，正如7年前用户所需要的那样 . 根据您需要支持的内容，其中一些可以免除 .

尽管如此，如果有一种方法可以在没有外部容器的情况下执行此操作，那就更好了，只需让文本在其自身内部对齐 .
```
#header {
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 150px;
}
```
回复于 2024-05-13T04:13:13+08:00

我发现这个解决方案基于默认的bootstrap启动模板

/* HTML */

<div class="content_wrapper">
  <div class="content_floating">
    <h2>HIS This is the header<br>
      In Two Rows</h2>
    <p>This is a description at the bottom too</p> 
  </div>
</div>

/* css */

.content_wrapper{
      display: table;
      width: 100%;
      height: 100%; /* For at least Firefox */
      min-height: 100%;
    }

.content_floating{
  display: table-cell;
  vertical-align: bottom;
  padding-bottom:80px;

}

回复于 2024-05-13T04:13:13+08:00

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

回复于 2024-05-13T04:13:13+08:00

似乎工作：

HTML：我在底部

CSS：

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

回复于 2024-05-13T04:13:13+08:00

2
我刚刚为客户端做的网站请求页脚文本是一个高框，底部的文本我用简单的填充实现了这个，应该适用于所有浏览器 .
```
<div id="footer">
  some text here
</div>
```
```
#footer {
  padding: 0 30px;
  padding-top: 60px;
  padding-bottom: 8px;
}
```
回复于 2024-05-13T04:13:13+08:00
-3
我使用这些属性，它的工作原理！
```
#header {
  display: table-cell;
  vertical-align: bottom;
}
```
回复于 2024-05-13T04:13:13+08:00

#header {
    height: 150px;
    display:flex;
    flex-direction:column;
}

.top{
    flex: 1;
}   

<div id="header">
    <h1 class="top">Header title</h1>
    Header content (one or multiple lines)
</div>

#header {
    height: 250px;
    display:flex;
    flex-direction:column;
    background-color:yellow;
}

.top{
    flex: 1;
}

<div id="header">
    <h1 class="top">Header title</h1>
    Header content (one or multiple lines)
</div>

回复于 2024-05-13T04:13:13+08:00

似乎工作：

#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;
}

使用less使解决CSS拼图更像编码而不是像...我只是喜欢CSS . 只需更改一个参数即可更改整个布局（不破坏它），这真是一种乐趣 .

回复于 2024-05-13T04:13:13+08:00

86
尝试：
```
div.myclass { margin-top: 100%; }
```
尝试更改％以修复它 . 示例：120％或90％......等 .
回复于 2024-05-13T04:13:13+08:00

你可以简单地实现flex

header {
  border: 1px solid blue;
  height: 150px;
  display: flex;                   /* defines flexbox */
  flex-direction: column;          /* top to bottom */
  justify-content: space-between;  /* first item at start, last at end */
}
h1 {
  margin: 0;
}

<header>
  <h1>Header title</h1>
  Some text aligns to the bottom
</header>

回复于 2024-05-13T04:13:13+08:00

经过一段时间的努力，我终于找到了满足我所有要求的解决方案：

不要求我知道容器的高度 .
与相对绝对解决方案不同，内容不会在其自己的层中浮动（即，它通常嵌入在容器div中） .
适用于各种浏览器（IE8） .
易于实施 .

解决方案只需要一个 <div> ，我称之为"aligner"：

CSS

.bottom_aligner {
    display: inline-block;
    height: 100%;
    vertical-align: bottom;
    width: 0px;
}

html

<div class="bottom_aligner"></div>
... Your content here ...

这个技巧的工作原理是创建一个高大的瘦小的div，它将文本基线推到容器的底部 .

这是一个完整的例子，可以实现OP的要求 . 我将“bottom_aligner”设为厚实和红色仅用于演示目的 .

CSS：

.outer-container {
  border: 2px solid black;
  height: 175px;
  width: 300px;
}

.top-section {
  background: lightgreen;
  height: 50%;
}

.bottom-section {
  background: lightblue;
  height: 50%;
  margin: 8px;
}

.bottom-aligner {
  display: inline-block;
  height: 100%;
  vertical-align: bottom;
  width: 3px;
  background: red;
}

.bottom-content {
  display: inline-block;
}

.top-content {
  padding: 8px;
}

HTML：

<body>
  <div class="outer-container">
    <div class="top-section">
      This text
      <br> is on top.
    </div>
    <div class="bottom-section">
      <div class="bottom-aligner"></div>
      <div class="bottom-content">
        I like it here
        <br> at the bottom.
      </div>
    </div>
  </div>
</body>

Align bottom content

回复于 2024-05-13T04:13:13+08:00

如果您可以设置内容的包装div的高度（＃header-content，如其他的回复中所示），而不是整个#header，也许您也可以尝试这种方法：

HTML

<div id="header">
    <h1>some title</h1>
    <div id="header-content">
        <span>
            first line of header text<br>
            second line of header text<br>
            third, last line of header text
        </span>
    </div>
</div>

CSS

#header-content{
    height:100px;
}

#header-content::before{
  display:inline-block;
  content:'';
  height:100%;
  vertical-align:bottom;
}

#header-content span{
    display:inline-block;
}

show on codepen

回复于 2024-05-13T04:13:13+08:00

103

这是使用flexbox的另一种解决方案，但没有使用 flex-end 进行底部对齐 . 想法是将 h1 上的 margin-bottom 设置为 auto 以将剩余内容推送到底部：

#header {
  height: 350px;
  display:flex;
  flex-direction:column;
  border:1px solid;
}

#header h1 {
 margin-bottom:auto;
}

<div id="header">
  <h1>Header title</h1>
  Header content (one or multiple lines) Header content (one or multiple lines)Header content (one or multiple lines) Header content (one or multiple lines)
</div>

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

#header {
  height: 350px;
  display:flex;
  flex-direction:column;
  border:1px solid;
}

#header span {
 margin-top:auto;
}

<div id="header">
  <h1>Header title</h1>
  <span>Header content (one or multiple lines)</span>
</div>

回复于 2024-05-13T04:13:13+08:00

现代的方法是使用flexbox . 请参阅下面的示例 . 您甚至不需要将 Some text... 包装到任何HTML标记中，因为直接包含在Flex容器中的文本包装在匿名Flex项目中 .

header {
  border: 1px solid blue;
  height: 150px;
  display: flex;                   /* defines flexbox */
  flex-direction: column;          /* top to bottom */
  justify-content: space-between;  /* first item at start, last at end */
}
h1 {
  margin: 0;
}

<header>
  <h1>Header title</h1>
  Some text aligns to the bottom
</header>

如果只有一些文本，并且您希望垂直对齐容器的底部 .

section {
  border: 1px solid blue;
  height: 150px;
  display: flex;                   /* defines flexbox */
  align-items: flex-end;           /* bottom of the box */
}

<section>Some text aligns to the bottom</section>

回复于 2024-05-13T04:13:13+08:00

使用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所指出的，您需要识别 Headers 内容才能使其正常工作 .

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

回复于 2024-05-13T04:13:13+08:00

0
如果父/块元素的行高大于内联元素的行高，则内联块或内联块元素可以与块级元素的底部对齐 . *

标记：
```
<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;
}
```
*确保您处于标准模式
回复于 2024-05-13T04:13:13+08:00
22
相对绝对定位是您最好的选择：
```
#header {
  position: relative;
  min-height: 150px;
}

#header-content {
  position: absolute;
  bottom: 0;
  left: 0;
}

#header, #header * {
  background: rgba(40, 40, 100, 0.25);
}
```
```
<div id="header">
  <h1>Title</h1>
  <div id="header-content">Some content</div>
</div>
```
但是你可能会遇到问题 . 当我尝试它时，我遇到了内容下方出现的下拉菜单问题 . 它只是不漂亮 .

老实说，对于垂直居中问题，以及项目的任何垂直对齐问题都不是固定的高度，使用表格更容易 .

示例：Can you do this HTML layout without using tables?
回复于 2024-05-13T04:13:13+08:00
1
一个完美的跨浏览器示例可能是这里的一个：

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>
    












    












    












    














    <div id="floater"></div>
</body>
</html>
```
如果您想知道您的代码可能无法在IE上运行，请记住在顶部添加DOCTYPE标记 . 在IE上工作至关重要 . 此外，这应该是第一个标签，它上面不应出现任何内容 .
回复于 2024-05-13T04:13:13+08:00

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

别客气

回复于 2024-05-13T04:13:13+08:00

4
如果您不担心旧版浏览器使用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/
回复于 2024-05-13T04:13:13+08:00

1169

如果您有多个动态高度项，请使用table和table-cell的CSS显示值：

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

该演示还有一个示例，说明如何使用相同的技术进行垂直居中对齐 .

回复于 2024-05-13T04:13:13+08:00

1
一个非常简单的单行解决方案是为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代码
回复于 2024-05-13T04:13:13+08:00
2
我知道这已经超过2年了，但我已经设计出了一种比提到的方式简单得多的方法 .

设置 Headers div的高度 . 然后在里面，为你的H1标签设置如下样式：
```
float: left;
padding: 90px 10px 11px
```
我正在为客户工作一个网站，设计要求文本位于某个div的底部 . 我已经使用这两行获得了结果，并且工作正常 . 此外，如果文本确实展开，填充仍将保持不变 .
回复于 2024-05-13T04:13:13+08:00

如何将div的内容与底部对齐？

24 回答

相关问题