假设我有以下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中做到这一点?


当前回答

使用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。请参阅下面的示例。你甚至不需要一些文本…因为直接包含在伸缩容器中的文本被包装在匿名伸缩项中。

标题{ 边框:1px纯蓝色; 身高:150 px; 显示:flex;/*定义flexbox */ flex-direction:列;/*从上到下*/ justify-content:之间的空间;/*开始的第一项,结束的最后一项*/ } h1 { 保证金:0; } <标题> <标题>标题< / h1 > 一些文本对齐到底部 头> < /

如果只有一些文本,你想垂直对齐到容器的底部。

节{ 边框:1px纯蓝色; 身高:150 px; 显示:flex;/*定义flexbox */ 对齐项目:flex-end;/*盒子底部*/ } 一些文本对齐到底部</section>

我遇到过这个问题几次,有很好的解决方案,但也有不太好的。因此,您可以使用flexbox、网格系统或显示表以不同的方式实现这一点。我更喜欢flex和margin-bottom: auto的组合。以下是我个人收集的文本底部可能性:

1. Flex / margin-top: auto;

.parent { 最小高度:200 px; 背景:绿色; 显示:flex; } .child { margin-top:汽车; 背景:红色; 填充:5 px; 颜色:白色; } < div class = "父" > <div class="child">底部文本</div> < / div >

2. Flex / align-self: Flex -end

.parent { 显示:flex; 最小高度:200 px; 背景:绿色; } .child { align-self: flex-end; 背景:红色; 填充:5 px; 颜色:白色; } < div class = "父" > <div class="child">底部文本</div> < / div >

3.Flex / align-items: Flex -end;

.parent { 最小高度:200 px; 背景:绿色; 显示:flex; 对齐项目:flex-end; } .child { 填充:5 px; 背景:红色; 颜色:白色; } < div class = "父" > <div class="child">底部文本</div> < / div >

4. Grid / align-self:结束;

.parent { 最小高度:200 px; 背景:绿色; 显示:网格; } .child { align-self:结束; 背景:红色; 填充:5 px; 颜色:白色; } < div class = "父" > <div class="child">底部文本</div> < / div >

5. 表/垂直对齐:底部;

就个人而言,我不喜欢这种处理表格的方法。

.parent { 最小高度:200 px; 背景:绿色; 显示:表; 宽度:100%; } .child { 显示:表格单元; vertical-align:底部; 背景:红色; 填充:5 px; 颜色:白色; } < div class = "父" > <div class="child">底部文本</div> < / div >

用垫片

6. Flex;/ flex: 1;

.parent { 最小高度:200 px; 背景:绿色; 显示:flex; flex-flow:列; } .spacer { flex: 1; } .child { 填充:5 px; 背景:红色; 颜色:白色; } < div class = "父" > < div class = "隔离" > < / div > <div class="child">底部文本</div> < / div >

7. Flex / Flex -grow: 1;

.parent { 最小高度:200 px; 背景:绿色; 显示:flex; flex-direction:列; } .spacer { flex-grow: 1; } .child { 填充:5 px; 背景:红色; 颜色:白色; } < div class = "父" > < div class = "隔离" > < / div > <div class="child">底部文本</div> < / div >

8. Inline-block / PseudoClass::before

.parent { 最小高度:200 px; 背景:绿色; } {前.child:: 显示:inline-block; 内容:”; 高度:100%; vertical-align:底部; } .child { 身高:200 px; 填充:5 px; 背景:红色; 颜色:白色; } < div class = "父" > <div class="child">底部文本</div> < / div >

❤️我个人比较喜欢的版本是:, 2. 和3。

我想出了一个比上面提到的简单得多的方法。

设置标题div的高度。然后在里面,样式H1标签如下:

float: left;
padding: 90px 10px 11px

我在一个客户的网站上工作,设计要求文本在某个div的底部。我已经使用这两行实现了结果,它工作得很好。此外,如果文本确实展开,填充将保持不变。

你不需要绝对+相对。对于容器和数据都使用相对位置是非常可能的。这就是你要做的。

假设你的数据高度是x。你的容器是相对的,页脚也是相对的。你所要做的就是添加你的数据

bottom: -webkit-calc(-100% + x);

您的数据将始终位于容器的底部。即使你有动态高度的容器也能工作。

HTML是这样的

<div class="container">
  <div class="data"></div>
</div>

CSS是这样的

.container{
  height:400px;
  width:600px;
  border:1px solid red;
  margin-top:50px;
  margin-left:50px;
  display:block;
}
.data{
  width:100%;
  height:40px;
  position:relative;
   float:left;
  border:1px solid blue;
  bottom: -webkit-calc(-100% + 40px);
   bottom:calc(-100% + 40px);
}

这里有一个活生生的例子

希望这能有所帮助。

#header {
    height: 150px;
    display:flex;
    flex-direction:column;
}

.top{
    flex: 1;
}   

<div id="header">
    <h1 class="top">Header title</h1>
    Header content (one or multiple lines)
</div>

#标题{ 身高:250 px; 显示:flex; flex-direction:列; 背景颜色:黄色; } .top { flex: 1; } < div id = "头" > <h1 class="top">头标题</h1> 标题内容(一行或多行) < / div >