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


当前回答

所有这些答案,没有一个对我有用……我不是flexbox专家,但这很容易理解,很容易理解和使用。要将某些内容与其余内容分开,请插入一个空div,并让它增长以填充空间。

https://jsfiddle.net/8sfeLmgd/1/

.myContainer {
  display: flex;
  height: 250px;
  flex-flow: column;
}

.filler {
  flex: 1 1;
}

<div class="myContainer">
  <div>Top</div>
  <div class="filler"></div>
  <div>Bottom</div>
</div>

当底部内容的大小不固定时,当容器的大小不固定时,这种反应就像预期的那样。

其他回答

我遇到过这个问题几次,有很好的解决方案,但也有不太好的。因此,您可以使用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。

* { 保证金:0; } div { 宽度:300 px; 背景:cornflowerblue; 颜色:# fff; 身高:150 px; 显示:flex; justify-content:之间的空间; flex-direction:列; } < div > 标题< h4 > < / h4 > <p>这是一个段落</p> <!自16世纪以来,Ipsum一直是行业标准的假文本,当时一个不知名的打印机拿了一大堆字,把它打乱了 < / div >

只需简单地使用display:flex和flex-direction:column使子div按垂直顺序同步,然后应用justify-content:space-between来调整父div的高度及其子内容。这样你才能实现你的目标。尝试这个代码片段来解决这个问题。

非常感谢你的兴趣。

对前面提到的其他flex-box解决方案的补充:

你可以在第一个div上使用flex-grow: 1 .这样,你的第二个div将与底部对齐,而第一个div将覆盖所有剩余空间。

在父div上,必须使用display: flex和flex-direction: column。

/* parent-wrapper div */
.container {
  display: flex;
  flex-direction: column;
}

/* first-upper div */
.main {
  flex-grow: 1;
}

检查提琴:https://jsfiddle.net/1yj3ve05/

似乎起作用了:

#content {
    /* or just insert a number with "px" if you're fighting CSS without lesscss.org :) */
    vertical-align: -@header_height + @content_height;

    /* only need it if your content is <div>,
     * if it is inline (e.g., <a>) will work without it */
    display: inline-block;
}

使用较少使解决CSS谜题更像编码而不是像…我就是喜欢CSS。这是一个真正的乐趣,当你可以改变整个布局(而不破坏它:)只是改变一个参数。

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

假设你的数据高度是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);
}

这里有一个活生生的例子

希望这能有所帮助。