假设我有以下CSS和HTML代码:
#标题{ 身高:150 px; ｝ < div id = "头" > <标题>标题< / h1 > 标题内容(一行或多行) < / div >
标题部分是固定的高度，但标题内容可能会改变。
我想要标题的内容垂直对齐到标题部分的底部，所以最后一行文本“粘”到标题部分的底部。
所以如果只有一行文本，它会像这样:
----------------------------- | 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中做到这一点?
当前回答
您可以简单地实现flex
标题{ 边框:1px纯蓝色; 身高:150 px; 显示:flex;/*定义flexbox */ flex-direction:列;/*从上到下*/ justify-content:之间的空间;/*开始的第一项，结束的最后一项*/ ｝ h1 { 保证金:0; ｝ <标题> <标题>标题< / h1 > 一些文本对齐到底部 头> < /
其他回答
使用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;
}
正如cletus所指出的，您需要确定头内容来完成这项工作。
<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>
这里是另一个解决方案使用flexbox，但没有使用flex-end底部对齐。这个想法是在h1上设置margin-bottom，以自动将剩余的内容推到底部:
#标题{ 身高:350 px; 显示:flex; flex-direction:列; 边界:1 px固体; ｝ #标题h1 { margin-bottom:汽车; ｝ < div id = "头" > <标题>标题< / h1 > 页眉内容(一行或多行)页眉内容(一行或多行)页眉内容(一行或多行)页眉内容(一行或多行) < / div >
我们也可以对文本的margin-top:auto做同样的事情，但在这种情况下，我们需要将它包装在div或span中:
#标题{ 身高:350 px; 显示:flex; flex-direction:列; 边界:1 px固体; ｝ #头span { margin-top:汽车; ｝ < div id = "头" > <标题>标题< / h1 > <span>标头内容(一行或多行)</span> < / div >
我想出了一个比上面提到的简单得多的方法。
设置标题div的高度。然后在里面，样式H1标签如下:
float: left;
padding: 90px 10px 11px
我在一个客户的网站上工作，设计要求文本在某个div的底部。我已经使用这两行实现了结果，它工作得很好。此外，如果文本确实展开，填充将保持不变。
display: flex;
align-items: flex-end;
相对+绝对定位是你最好的选择:
#标题{ 位置:相对; 最小高度:150 px; ｝ #标题内容{ 位置:绝对的; 底部:0; 左:0; ｝ #header， #header * { 背景:rgba(40,40,100,0.25); ｝ < div id = "头" > h1标题< h1 > < / > 在最后一个地方，情况可能不是这样，他们会长期存在，会深深地扎根，不会轻易被铲除。修改宪法的计划，为了纠正最近的违反宪法的行为，以及其他目的，实际上已经在一个州尝试过了 < / div >
但你可能会遇到问题。当我尝试它时，我遇到了下拉菜单出现在内容下面的问题。这并不漂亮。
老实说，对于垂直定心问题，以及任何与物品的垂直对齐问题都不是固定高度的问题，使用表格更容易。
例子:你可以不使用表格来做这个HTML布局吗?
