将 DIV 与底部或基线对齐答案

【问题标题】：Align DIV's to bottom or baseline将 DIV 与底部或基线对齐
【发布时间】：2011-01-02 04:04:31
【问题描述】：

我正在尝试将子 div 标签与父 div 标签的底部或基线对齐。

我想要做的就是让子 Div 位于父 Div 的基线，这是现在的样子：

HTML

<div id="parentDiv">
<div class="childDiv"></div>
</div>

CSS

#parentDiv
{
  width:300px;
  height:300px;
  background-color:#ccc;
  background-repeat:repeat
}
#parentDiv .childDiv
{
  height:100px;
  width:30px;
  background-color:#999;
}

注意

我将拥有多个高度不同的childDivs，我需要它们都与基线/底部对齐。

【问题讨论】：

没想到！我刚刚删除了 parentDiv 上的高度，所有 childDiv 现在都位于基线上。我只是一个愚蠢的莎莉！
但是如果你想让它有一些特定的高度 - 你应该根据父级使用absolute定位。

标签： html css

【解决方案1】：

您可能必须将子 div 设置为 position: absolute。

将您的子样式更新为

#parentDiv .childDiv
{
  height:100px;
  width:30px;
  background-color:#999;
  position:absolute;
  top:207px;
}

【讨论】：

我试过了，但我需要的是 childDiv 的底部位于 parentDiv 的底部，图表是动态的，并且每个 childDiv 的高度会有所不同。 ..定位可能有效，但我还没有找到可靠的东西...
最好将 top 设置为 207（一些任意数字）最好设置为 bottom:0

【解决方案2】：

你需要添加这个：

#parentDiv {
  position: relative;
}

#parentDiv .childDiv {
  position: absolute;
  bottom: 0;
  left: 0;
}

当声明absolute元素时，它根据它最近的不是static的父元素定位（它必须是absolute、relative或fixed）。

【讨论】：

我怀疑这是否符合他的要求，目前这会将所有（如果它是动态条形图，看起来好像会有多个子元素）放在彼此之上。

【解决方案3】：

这行得通（我只测试了 ie & ff）：

<html>
<head>
    <style type="text/css">
        #parent {
            height: 300px;
            width: 300px;
            background-color: #ccc;
            border: 1px solid red;
            position: relative;
        }
        #child  {
            height: 100px;
            width: 30px;
            background-color: #eee;
            border: 1px solid green;
            position: absolute;
            bottom: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div id="parent">parent
        <div id="child">child</div>
    </div>
    outside
</body>
</html>

希望有帮助。

【讨论】：

【解决方案4】：

如果您的父 Div 中有多个子 Div，则可以使用如下所示的垂直对齐属性：

.Parent div
{
  vertical-align : bottom;
}

【讨论】：

为什么在没有 cmets 的情况下有这么多反对票？它不能解决问题吗？在线研究表明应该这样做。

【解决方案5】：

一个旧帖子，但我想我会为任何寻找的人分享一个答案。因为当你使用absolute 时，事情可能会出错。我会做的是

HTML

<div id="parentDiv"></div>
<div class="childDiv"></div>

CSS

parentDiv{

}
childDiv{
    height:40px;
    margin-top:-20px;
}

这只会让底部 div 回到父 div 中。对大多数浏览器也很安全

【讨论】：

这将使 childDiv 一半位于 parentDiv 的底部。您需要在边距顶部至少使用 -40px。也是使用 position:relative 的最佳实践；在这种情况下，对于两个 div。

【解决方案6】：

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

该演示还有一个示例，如何使用相同的技术进行垂直居中对齐。

【讨论】：

对于尽可能多的桌子，有时这是最好的解决方案
这对我来说是最好的解决方案
这确实是最好的解决方案，因为使用绝对定位的元素通常会改变父元素的高度

【解决方案7】：

我有类似的东西，并通过有效地向孩子添加一些 padding-top 来使其工作。

我确信这里的其他一些答案可以解决问题，但经过很长时间后我无法让它们轻松工作；相反，我最终得到了 padding-top 解决方案，它的简单性很优雅，但对我来说似乎有点 hackish（更不用说它设置的像素值可能取决于父级高度）。

【讨论】：

【解决方案8】：

Y. Shoham 发布的答案（使用绝对定位）在大多数情况下容器是固定高度的情况下似乎是最简单的解决方案，但如果父 DIV 必须包含多个 DIV 并根据动态自动调整其高度内容，那么可能有问题。我需要有两个动态内容块；一个与容器的顶部对齐，一个与底部对齐，虽然我可以让容器调整到顶部 DIV 的大小，但如果与底部对齐的 DIV 更高，它不会调整容器的大小，而是会延伸到外面. romiem 上面概述的使用表格样式定位的方法虽然有点复杂，但在这方面更加稳健，并且允许与底部对齐并正确地调整容器的自动高度。

CSS

#container {
        display: table;
        height: auto;
}

#top {
    display: table-cell;
    width:50%;
    height: 100%;
}

#bottom {
    display: table-cell;
    width:50%;
    vertical-align: bottom;
    height: 100%;
}

HTML

<div id=“container”>
    <div id=“top”>Dynamic content aligned to top of #container</div>
    <div id=“bottom”>Dynamic content aligned to botttom of #container</div>
</div>

我意识到这不是一个新的答案，但我想对这种方法发表评论，因为它引导我找到我的解决方案，但作为一个新手，我不能发表评论，只能发帖。

【讨论】：

【解决方案9】：

七年后搜索垂直对齐仍然会提出这个问题，所以我将发布另一个我们现在可用的解决方案：flexbox 定位。只需在父 div 上设置 display:flex; justify-content: flex-end; flex-direction: column（在此 fiddle 中也有演示）：

#parentDiv
{
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  width:300px;
  height:300px;
  background-color:#ccc;
  background-repeat:repeat
}

【讨论】：

简单。正是我想要的。如果您不想拉伸物品，请使用align-items: flex-start;。
这是最近最好的答案！
justify-content: flex-end 消失了我的滚动条
这仅在您希望所有子元素底部对齐时才有效。

【解决方案10】：

你也可以使用垂直对齐

td {
  height: 150px;
  width: 150px;
  text-align: center;
}

b {
  border: 1px solid black;
}

.child-2 {
  vertical-align: bottom;
}

.child-3 {
  vertical-align: top;
}

<table border=1>
  <tr>
    <td class="child-1">
      <b>child 1</b>
    </td>
    <td class="child-2">
     <b>child 2</b>
    </td>
    <td class="child-3">
      <b>child 3</b>
    </td>
  </tr>
</table>

【讨论】：

问题中特别提到了DIV，为什么要用table？