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

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

#头{
高度:150像素;
}
<div id=“header”>
<h1>标题&lt/h1>
标题内容(一行或多行)
&lt/部门&gt

页眉部分高度固定,但页眉内容可能会更改

我希望标题的内容与标题部分的底部垂直对齐,以便最后一行文本“粘贴”到标题部分的底部

因此,如果只有一行文本,它将类似于:

-----------------------------
|标题
|
|
|
|标题内容(生成一行)
-----------------------------

如果有三条线:

-----------------------------
|标题
|
|标题内容(如此)
|很多东西都很完美
|跨越三条线)
-----------------------------

如何在CSS中实现这一点

相对+绝对定位是您的最佳选择:

#头{
位置:相对位置;
最小高度:150px;
}
#标题内容{
位置:绝对位置;
底部:0;
左:0;
}
#标题,#标题*{
背景:rgba(40,40,100,0.25);
}
<div id=“header”>
<h1>标题&lt/h1>
<div id=“标题内容”>在最后一个地方,如果不是这样的话,它们将长期存在,扎根很深,也不会轻易被根除。为了纠正最近违反宪法的行为以及出于其他目的而修改宪法的计划,实际上已经在其中一个州进行了试验。&lt/部门>
&lt/部门&gt

但你可能会遇到这样的问题。当我尝试它时,我遇到了内容下方出现下拉菜单的问题。只是不太好看

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

示例:不使用表就可以完成此HTML布局吗

发表评论