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

How to align content of a div to the bottom

提问by kristof

Say I have the following CSS and HTML code:

假设我有以下 CSS 和 HTML 代码：

#header {
  height: 150px;
}

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

The header section is fixed height, but the header content may change.

标题部分是固定高度的，但标题内容可能会发生变化。

I would like the content of the header to be vertically aligned to the bottom of the header section, so the last line of text "sticks" to the bottom of the header section.

我希望标题的内容与标题部分的底部垂直对齐，因此最后一行文本“粘”到标题部分的底部。

So if there is only one line of text, it would be like:

所以如果只有一行文本，它会像：

-----------------------------
| Header title
|
|
|
| header content (resulting in one line)
-----------------------------

And if there were three lines:

如果有三行：

-----------------------------
| Header title
|
| header content (which is so
| much stuff that it perfectly
| spans over three lines)
-----------------------------

How can this be done in CSS?

这如何在 CSS 中完成？

回答by cletus

Relative+absolute positioning is your best bet:

相对+绝对定位是你最好的选择：

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

But you may run into issues with that. When I tried it I had problems with dropdown menus appearing below the content. It's just not pretty.

但是你可能会遇到问题。当我尝试它时，我遇到了出现在内容下方的下拉菜单的问题。它只是不漂亮。

Honestly, for vertical centering issues and, well, any vertical alignment issues with the items aren't fixed height, it's easier just to use tables.

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

Example: Can you do this HTML layout without using tables?

示例：你能不使用表格来做这个 HTML 布局吗？

回答by Patrick McElhaney

Use CSS positioning:

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

As cletus noted, you need identify the header-content to make this work.

正如cletus 所指出的，您需要确定 header-content 才能完成这项工作。

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

回答by Lee Irvine

If you're not worried about legacy browsers use a flexbox.

如果您不担心旧浏览器，请使用 flexbox。

The parent element needs its display type set to flex

父元素需要将其显示类型设置为 flex

div.parent {
  display: flex;
  height: 100%;
}

Then you set the child element's align-self to flex-end.

然后将子元素的 align-self 设置为 flex-end。

span.child {
  display: inline-block;
  align-self: flex-end;
}

Here's the resource I used to learn: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

这是我用来学习的资源：http: //css-tricks.com/snippets/css/a-guide-to-flexbox/

回答by Lee Irvine

I use these properties and it works!

我使用这些属性并且它有效！

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

回答by Greg Prisament

After struggling with this same issue for some time, I finally figured out a solution that meets all of my requirements:

在为同样的问题苦苦挣扎了一段时间后，我终于找到了一个满足我所有要求的解决方案：

• Does not require that I know the container's height.
• Unlike relative+absolute solutions, the content doesn't float in its own layer (i.e., it embeds normally in the container div).
• Works across browsers (IE8+).
• Simple to implement.

• 不需要我知道容器的高度。
• 与相对+绝对解决方案不同，内容不会漂浮在它自己的层中（即，它通常嵌入到容器 div 中）。
• 跨浏览器（IE8+）工作。
• 实施简单。

The solution just takes one <div>, which I call the "aligner":

解决方案只需要一个<div>，我称之为“对齐器”：

CSS

CSS

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

html

html

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

This trick works by creating a tall, skinny div, which pushes the text baseline to the bottom of the container.

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

Here is a complete example that achieves what the OP was asking for. I've made the "bottom_aligner" thick and red for demonstration purposes only.

这是一个完整的示例，它实现了 OP 的要求。我仅出于演示目的将“bottom_aligner”变厚和变红。

CSS:

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:

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>

回答by Stickers

The modern way to do it would be using flexbox. See the example below. You don't even need to wrap Some text...into any HTML tag, since text directly contained in a flex container is wrapped in an anonymous flex item.

现代方法是使用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>

If there is only some text and you want to align vertically to the bottom of the container.

如果只有一些文本并且您想垂直对齐容器底部。

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>

回答by user3053247

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

回答by dougwig

Inline or inline-block elements can be aligned to the bottom of block level elements if the line-height of the parent/block element is greater than that of the inline element.*

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

markup:

标记：

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

css:

css：

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

*make sure you're in standards mode

*确保您处于标准模式

回答by MK Vimalan

You can simply achieved 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>

回答by romiem

If you have multiple, dynamic height items, use the CSS display values of table and table-cell:

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

HTML

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

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

I've created a JSBin demo here: http://jsbin.com/INOnAkuF/2/edit

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

The demo also has an example how to vertically center align using the same technique.

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