假设我有以下CSS和HTML代码:
#头{
高度:150像素;
}
<;div id=“header”>;
<;h1>;标题</h1>;
标题内容(一行或多行)
</部门>
页眉部分高度固定,但页眉内容可能会更改
我希望标题的内容与标题部分的底部垂直对齐,以便最后一行文本“粘贴”到标题部分的底部
因此,如果只有一行文本,它将类似于:
----------------------------- |标题 | | | |标题内容(生成一行) -----------------------------
如果有三条线:
----------------------------- |标题 | |标题内容(如此) |很多东西都很完美 |跨越三条线) -----------------------------
如何在CSS中实现这一点
相对+绝对定位是您的最佳选择:
#头{
位置:相对位置;
最小高度:150px;
}
#标题内容{
位置:绝对位置;
底部:0;
左:0;
}
#标题,#标题*{
背景:rgba(40,40,100,0.25);
}
<;div id=“header”>;
<;h1>;标题</h1>;
<;div id=“标题内容”>;在最后一个地方,如果不是这样的话,它们将长期存在,扎根很深,也不会轻易被根除。为了纠正最近违反宪法的行为以及出于其他目的而修改宪法的计划,实际上已经在其中一个州进行了试验。</部门>;
</部门>
但你可能会遇到这样的问题。当我尝试它时,我遇到了内容下方出现下拉菜单的问题。只是不太好看
老实说,对于垂直居中问题,以及项目的任何垂直对齐问题,并不是固定高度,只使用表格更容易
示例:不使用表就可以完成此HTML布局吗