logo标签列表

将DIV对齐到底部或基线

htmlcss
118
我试图将子 Div 标签与父 Div 标签底部或基线对齐。
我只想让子 Div 在父 Div 的基线上，目前它的样子是这样的： HTML
<div id="parentDiv">
<div class="childDiv"></div>
</div>

CSS


（这是一段HTML代码，表示层叠样式表）
#parentDiv
{
  width:300px;
  height:300px;
  background-color:#ccc;
  background-repeat:repeat
}
#parentDiv .childDiv
{
  height:100px;
  width:30px;
  background-color:#999;
}

注意

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

我完全没有想到！我只是在parentDiv上去掉了高度，所有的childDiv现在都在基线上。我只是一个傻瓜！ - sia
但是如果您希望它具有特定的高度 - 您应该根据父元素使用“绝对”定位。 - Yaakov Shoham
11个回答
184

你需要添加这个：

#parentDiv {
  position: relative;
}

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

在声明absolute元素时，它的定位取决于最近的非static父元素（该父元素必须是absolute、relative或fixed）。

9
我怀疑这并没有达到他想要的效果，目前这会将所有元素（如果是一个动态条形图，看起来可能有多个子元素）堆叠在一起。 - crmepham
加1，更多的解释会很有用...@任何人!! - Tejas
82
七年后搜索垂直对齐仍会出现此问题，因此我将发布另一种可用于我们的解决方案：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
}
1
简单明了，正是我想要的。如果您不想拉伸项目，请使用 align-items: flex-start;。 - Madhan
这是目前最好的答案！ - Rens Groenveld
justify-content: flex-end会导致我的滚动条消失。 - kta
13
只有当您希望所有子元素都底部对齐时，此方法才有效。 - clayRay
13

使用 CSS 的 display 属性值 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

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

1
尽管表格经常受到诟病，但有时这确实是最好的解决方案。 - Sean256
这对我来说是最好的解决方案。 - bowlerae
这确实是最佳解决方案，因为使用绝对定位元素通常会改变父元素的高度。 - hamncheez
7

这个可以正常工作（我只测试了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>

希望这有所帮助。
6
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>

示例

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

3
您可能需要将子div设置为position: absolute。
更新您的子样式为：
#parentDiv .childDiv
{
  height:100px;
  width:30px;
  background-color:#999;
  position:absolute;
  top:207px;
}
我尝试过了，但我需要的是子Div底部与父Div底部对齐，图表是动态的，每个子Div的高度都会不同...定位可能有效，但我还没有找到一个稳定的解决方案... - sia
5
将顶部设置为207（任意数字）不是一个好主意，最好将底部设置为0。 - pstanton
1

<body>
<!-- CSS styles-->

<style>
.parent{
  background-color:gray;
  height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
</style>




<!-- HTML -->

<div class="parent">
    <div class="child1">
        hello world! this is first child aligned at the top of parent div
    </div>
    <div class="child2">
        hello world! this is first child aligned in the space between first and last child
    </div>
    <div class="child3">
        hello world! this is last child aligned at the bottom of parent div
    </div>
</div>

</body>
1

虽然这是一篇旧文章，但我想分享一个答案给任何需要的人。

因为当你使用 absolute 时，有些问题可能会出现。

我的做法是：

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

The Css

parentDiv{

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

这将使底部的div回到父级div中。对大多数浏览器都是安全的。

这将使childDiv在parentDiv底部的一半。您需要至少在margin-top上使用-40px。此外，在这种情况下，最好为两个div都使用position:relative;。 - Augus
1

您也可以使用垂直对齐

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 的情况下，你要使用表格？ - TheRealChx101
1

我曾遇到类似的问题，通过在子元素上添加一些padding-top使其正常工作。

我相信这里的其他答案也能解决问题，但经过很长时间的尝试后，我无法轻松地让它们起作用。相反，我采用了padding-top的解决方案，这种解决方案简单而优雅，但在我看来有点hackish（不要提它设置的像素值可能会取决于父元素的高度）。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接