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

查看:374
本文介绍了如何将div的内容与底部对齐的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

说我有以下CSS和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 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)
-----------------------------

如果有三行:


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

如何在CSS中完成此操作?

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

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

示例:可以在不使用表的情况下进行HTML布局吗? ?

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

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆