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

最新推荐文章于 2024-07-24 16:53:23 发布

p15097962069

最新推荐文章于 2024-07-24 16:53:23 发布

阅读量1.1w

点赞数 1

文章标签： html css vertical-alignment

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

版权

说我有以下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

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