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

假设我有以下CSS和HTML代码：

#header {
  height: 150px;
}

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

---

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

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

---

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

---

我使用这些属性，它的工作原理！

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

链接地址: http://www.djcxy.com/p/2113.html

上一篇: How to align content of a div to the bottom?

下一篇: How to make an image center (vertically & horizontally) inside a bigger div