如何将div的内容对齐到底部？ [英] How to align content of a div to the bottom?

问题描述

说我有以下CSS和HTML代码：

  #header {height：150px;}  

 < div id = header> < h1>标题标题< / h1>标题内容（一行或多行）< / div>  

<标题部分是固定高度，但是标题内容可能改变。
我想将标题的内容垂直对齐到标题部分的底部，因此最后一行文本粘贴到标题部分的底部。

所以如果只有一行文本，它将是：

  ------ ----------------------- 
 |标题title 
 | 
 | 
 | 
 |标题内容（结果为一行）
 ----------------------------- 
  

如果有三行：

  ----------------------------- 
 |标题title 
 | 
 |标题内容（这是
 |很多东西，它完美
 |跨越三行）
 -------------------- --------- 
  

如何在CSS中做到这一点？

解决方案

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

  #header {position：relative; min-height：150px; }＃header-content {position：absolute; bottom：0; left：0; }  

 < div id =header> < h1>标题< / h1> < div id =header-content>部分内容< / div>< / div>  

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

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

示例：您可以在不使用表格的情况下执行此HTML布局吗？

Say I have the following CSS and HTML code:

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

解决方案

Relative+absolute positioning is your best bet:

  #header {
    position: relative;
    min-height: 150px;
  }
  #header-content {
    position: absolute;
    bottom: 0;
    left: 0;
  }

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

这篇关于如何将div的内容对齐到底部？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！