如何将div的内容与底部对齐

最新推荐文章于 2024-11-28 11:05:51 发布

p15097962069

最新推荐文章于 2024-11-28 11:05:51 发布

阅读量1.2w

点赞数 1

文章标签： html css vertical-alignment

原文链接：https://cs.sofbug.com/question/2SQj

版权

这篇博客讨论了如何使用CSS将div的内容与底部对齐，提供了多种解决方案，包括设置行高、使用table和table-cell、Flexbox布局以及相对和绝对定位等方法，适用于不同浏览器和动态高度的需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

说我有以下CSS和HTML代码：

 #header { height: 150px; }

 <div id="header"> <h1>Header title</h1> Header content (one or multiple lines) </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中完成此操作？

#1楼

如果父/块元素的行高大于行内元素的行高，则可以将行内或行内块元素与块级元素的底部对齐。*

标记：

<h1 class="alignBtm"><span>I'm at the bottom</span></h1>

CSS：

h1.alignBtm {
  line-height: 3em;
}
h1.alignBtm span {
  line-height: 1.2em;
  vertical-align: bottom;
}

*确保您处于标准模式

#2楼

似乎正在工作：

#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。当您仅需更改一个参数即可更改整个布局（不破坏它：）时，这是一种真正的荣幸。

#3楼

尝试：

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

尝试更改％进行修复。例如：120％或90％...等

#4楼

我刚刚为客户提供的网站要求页脚文本是一个高框，底部是我用简单的填充即可实现的文本，该文本应适用于所有浏览器。

<div id="footer">
  some text here
</div>

#footer {
  padding: 0 30px;
  padding-top: 60px;
  padding-bottom: 8px;
}

#5楼

如果您有多个动态高度项目，请使用table和table-cell的CSS显示值：

的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

该演示还提供了一个示例，说明如何使用相同的技术垂直居中对齐。

#6楼

如果您可以设置内容的环绕div的高度（如其他答复中所示的＃header-content）而不是整个#header的高度，也许您也可以尝试以下方法：

的HTML

<div id="header">
    <h1>some title</h1>
    <div id="header-content">
        <span>
            first line of header text<br>
            second line of header text<br>
            third, last line of header text
        </span>
    </div>
</div>

的CSS

#header-content{
    height:100px;
}

#header-content::before{
  display:inline-block;
  content:'';
  height:100%;
  vertical-align:bottom;
}

#header-content span{
    display:inline-block;
}

显示在codepen上

#7楼

经过一段时间的努力，我终于找到了可以满足我所有要求的解决方案：

不需要我知道容器的高度。
与相对+绝对解决方案不同，内容不会浮动在其自己的层中（即，它通常嵌入容器div中）。
可跨浏览器（IE8 +）使用。
易于实现。

该解决方案只需要一个<div> ，我称之为“ aligner”：

的CSS

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

html

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

此技巧通过创建一个又高又瘦的div来起作用，该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>

对齐底部内容

#8楼

如果您不担心旧版浏览器，请使用flexbox。

父元素需要将其显示类型设置为flex

div.parent {
  display: flex;
  height: 100%;
}

然后，将子元素的align-self设置为flex-end。

span.child {
  display: inline-block;
  align-self: flex-end;
}

这是我曾经学习的资源： http : //css-tricks.com/snippets/css/a-guide-to-flexbox/

#9楼

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

别客气

#10楼

您不需要绝对+相对。使用容器和数据的相对位置很有可能。这就是你的做法。

假设您的数据高度将为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);
}

这里的例子

希望这可以帮助。

#11楼

似乎正在工作：

HTML：我在最底层

CSS：

h1.alignBtm {
  line-height: 3em;
}
h1.alignBtm span {
  line-height: 1.2em;
  vertical-align: bottom;
}

#12楼

这是灵活的方法。当然，IE8不支持它，因为用户7年前就需要它。根据您需要支持的内容，其中一些可以取消。

不过，如果有一种方法可以在没有外部容器的情况下做到这一点，那将是很好的，只需使文本在其自身内部对齐即可。

#header {
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 150px;
}

#13楼

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

/* 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;

}

#14楼

现代的方法是使用flexbox 。请参见下面的示例。您甚至不需要将Some text...包装到任何HTML标记中，因为直接包含在flex容器中的文本被包装在匿名flex项目中。

 header { border: 1px solid blue; height: 150px; display: flex; /* defines flexbox */ flex-direction: column; /* top to bottom */ justify-content: space-between; /* first item at start, last at end */ } h1 { margin: 0; }

 <header> <h1>Header title</h1> Some text aligns to the bottom </header>

如果只有一些文本，并且您想垂直对齐到容器的底部。

 section { border: 1px solid blue; height: 150px; display: flex; /* defines flexbox */ align-items: flex-end; /* bottom of the box */ }

 <section>Some text aligns to the bottom</section>

#15楼

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

#16楼

#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>

 #header { height: 250px; display:flex; flex-direction:column; background-color:yellow; } .top{ flex: 1; }

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

#17楼

这是使用flexbox但不使用flex-end进行底部对齐的另一种解决方案。这个想法是在h1上设置margin-bottom为自动将剩余内容推到底部：

 #header { height: 350px; display:flex; flex-direction:column; border:1px solid; } #header h1 { margin-bottom:auto; }

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

我们也可以在文本上使用margin-top:auto做同样的事情，但是在这种情况下，我们需要将其包装在div或span ：

 #header { height: 350px; display:flex; flex-direction:column; border:1px solid; } #header span { margin-top:auto; }

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

#18楼

一个非常简单的单行解决方案是在div中增加行高，同时要记住div的所有文本都将排在最底下。

CSS：

#layer{width:198px;
       height:48px;
       line-height:72px;
       border:1px #000 solid}
#layer a{text-decoration:none;}

HTML：

<div id="layer">
    <a href="#">text at div's bottom.</a>
</div>

请记住，这是一种实用且快速的解决方案，当您只希望div中的文本下降时，如果您需要将图像和内容组合在一起，则必须编写一些更复杂且响应更快的CSS

#19楼

您可以简单地实现弹性

 header { border: 1px solid blue; height: 150px; display: flex; /* defines flexbox */ flex-direction: column; /* top to bottom */ justify-content: space-between; /* first item at start, last at end */ } h1 { margin: 0; }

 <header> <h1>Header title</h1> Some text aligns to the bottom </header>

#20楼

所有这些答案对我没有用...我不是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>

当底部内容物的尺寸不固定时，这也会按预期做出反应。

#21楼

使用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>

#22楼

相对+绝对定位是您最好的选择：

 #header { position: relative; min-height: 150px; } #header-content { position: absolute; bottom: 0; left: 0; } #header, #header * { background: rgba(40, 40, 100, 0.25); }

 <div id="header"> <h1>Title</h1> <div id="header-content">Some content</div> </div>

但是您可能会遇到问题。当我尝试它时，在内容下方显示下拉菜单时出现问题。只是不漂亮。

坦率地说，对于垂直居中问题以及项目的垂直对齐问题不是固定高度，使用表格会更容易。

示例：您可以在不使用表格的情况下进行HTML布局吗？

#23楼

我设计了一种比所提到的要简单得多的方法。

设置标题div的高度。然后在其中设置H1标签的样式，如下所示：

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

我正在为一个客户的网站工作，并且设计要求文本在特定div的底部。我已经使用这两行实现了结果，并且效果很好。同样，如果文本确实扩大了，则填充仍将保持不变。

#24楼

一个完美的跨浏览器示例可能就是以下示例：

http://www.csszengarden.com/?cssfile=/213/213.css&page=0

这个想法既要在底部显示div，又要使其固定在那里。通常，简单的方法会使粘性div随主要内容向上滚动。

以下是一个完全可行的最小示例。请注意，不需要div嵌入技巧。许多BR只是为了强制出现滚动条：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #floater {
            background: yellow;
            height: 200px;
            width: 100%;
            position: fixed;
            bottom: 0px;
            z-index: 5;
            border-top: 2px solid gold;
        }

    </style>
</head>


<body>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>


    <div id="floater"></div>
</body>
</html>

如果您想知道您的代码可能无法在IE上运行，请记住在顶部添加DOCTYPE标记。这对于在IE上工作至关重要。同样，这应该是第一个标签，并且上面没有任何内容。

#25楼

我使用这些属性，并且有效！

#header {
  display: table-cell;
  vertical-align: bottom;
}