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


当前回答

将div移到底部的最佳解决方案如下所示。 基本上,你需要做的是将display flex和flex-direction设置为父类的列,并将'margin-top: auto'添加到它的子类,该子类需要被浮动到容器的底部 注意:我已经使用了bootstrap及其类。

.box-wrapper { 身高:400 px; 边框:1px实心#000; 保证金:20 px; 显示:flex;//仅用于表示。引导默认类已经添加 flex-direction:列; } .link-02 { margin-top:汽车; } <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet" /> <div class="box-wrapper d-flex flex-column col-4"> <div>意外blanditiis debitis</div> < div class = " news-box”> <img class="d-block" alt="non ipsam nihil" src="https://via.placeholder.com/150"> <p>连续痛苦的分娩和面对的分娩</p> < / div > <a href="https://oscar.com" target="_blank" class="link-02"> 这是移动到底部与最小的努力 < / > < / div >

其他回答

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

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

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

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

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

2015的解决方案

<div style='width:200px; height:60px; border:1px solid red;'>

    <table width=100% height=100% cellspacing=0 cellpadding=0 border=0>
        <tr><td valign=bottom>{$This_text_at_bottom}</td></tr>
    </table>

</div>

http://codepen.io/anon/pen/qERMdx

你的欢迎

如果你有多个动态高度项,使用CSS显示table和table-cell的值:

HTML

<html>
<body>

  <div class="valign bottom">
    <div>

      <div>my bottom aligned div 1</div>
      <div>my bottom aligned div 2</div>
      <div>my bottom aligned div 3</div>

    </div>
  </div>

</body>
</html>

CSS

html,
body {
  width: 100%;
  height: 100%;
}
.valign {
  display: table;
  width: 100%;
  height: 100%;
}
.valign > div {
  display: table-cell;
  width: 100%;
  height: 100%;
}
.valign.bottom > div {
  vertical-align: bottom;
}

我在这里创建了一个JSBin演示:http://jsbin.com/INOnAkuF/2/edit

演示也有一个例子如何垂直中心对齐使用相同的技术。

在为同样的问题挣扎了一段时间后,我终于找到了一个满足我所有要求的解决方案:

不需要我知道容器的高度。 与相对+绝对解决方案不同,内容不会漂浮在自己的层中(即,它通常嵌入在容器div中)。 支持跨浏览器(IE8+)。 易于实现。

解决方案只需要一个<div>,我称之为“对齐器”:

CSS

.bottom_aligner {
    display: inline-block;
    height: 100%;
    vertical-align: bottom;
    width: 0px;
}

html

<div class="bottom_aligner"></div>
... Your content here ...

这个技巧通过创建一个高而细的div来实现,它将文本基线推到容器的底部。

下面是一个完整的例子,实现了OP的要求。为了演示,我将“bottom_aligner”设置为粗大的红色。

CSS:

.outer-container {
  border: 2px solid black;
  height: 175px;
  width: 300px;
}

.top-section {
  background: lightgreen;
  height: 50%;
}

.bottom-section {
  background: lightblue;
  height: 50%;
  margin: 8px;
}

.bottom-aligner {
  display: inline-block;
  height: 100%;
  vertical-align: bottom;
  width: 3px;
  background: red;
}

.bottom-content {
  display: inline-block;
}

.top-content {
  padding: 8px;
}

HTML:

<body>
  <div class="outer-container">
    <div class="top-section">
      This text
      <br> is on top.
    </div>
    <div class="bottom-section">
      <div class="bottom-aligner"></div>
      <div class="bottom-content">
        I like it here
        <br> at the bottom.
      </div>
    </div>
  </div>
</body>

您可以简单地实现flex

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