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

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

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

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

其他回答

试一试:

div.myclass { margin-top: 100%; }

尝试更改%来修复它。例如:120%或90%等等。

相对+绝对定位是你最好的选择:

#标题{ 位置:相对; 最小高度:150 px; } #标题内容{ 位置:绝对的; 底部:0; 左:0; } #header, #header * { 背景:rgba(40,40,100,0.25); } < div id = "头" > h1标题< h1 > < / > 在最后一个地方,情况可能不是这样,他们会长期存在,会深深地扎根,不会轻易被铲除。修改宪法的计划,为了纠正最近的违反宪法的行为,以及其他目的,实际上已经在一个州尝试过了 < / div >

但你可能会遇到问题。当我尝试它时,我遇到了下拉菜单出现在内容下面的问题。这并不漂亮。

老实说,对于垂直定心问题,以及任何与物品的垂直对齐问题都不是固定高度的问题,使用表格更容易。

例子:你可以不使用表格来做这个HTML布局吗?

display: flex;
align-items: flex-end;

我发现这个解决方案基于一个默认的引导启动模板

/* HTML */

<div class="content_wrapper">
  <div class="content_floating">
    <h2>HIS This is the header<br>
      In Two Rows</h2>
    <p>This is a description at the bottom too</p> 
  </div>
</div>

/* css */

.content_wrapper{
      display: table;
      width: 100%;
      height: 100%; /* For at least Firefox */
      min-height: 100%;
    }

.content_floating{
  display: table-cell;
  vertical-align: bottom;
  padding-bottom:80px;

}

您可以简单地实现flex

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