对齐DIV的底部或基线

我正在尝试将父级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; 
}

备注

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

来源

2010-01-06 sia

wasnt甚至思考！我刚刚删除了parentDiv的高度，现在所有的childDiv都坐在基线上。我只是一个愚蠢的萨莉！ – sia 2010-01-06 17:59:16

但是，如果你想要它具有一些特定的高度 - 你应该根据父母使用绝对定位。 – 2010-01-06 18:01:23

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

更新你的孩子风格

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

来源

2010-01-06 17:55:23 Ravia

我试过了，但我需要的是childDiv的底部坐在parentDiv的底部，图形是动态的，并且高度会从每个childDiv到下一个不同...定位可能工作，但我没有退出计算出一些坚实的东西... – sia 2010-01-06 17:57:29

我已经尝试过这个，并且正在为我工作 – Ravia 2010-01-06 18:03:52

不是一个好主意，可以设置顶部为207（某些任意数字）更好地设置底部：0 – pstanton 2010-01-06 18:06:58

129

你需要补充一点：

#parentDiv { 
    position: relative; 
} 

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

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

来源

2010-01-06 17:59:51

我怀疑这是否是他想要的，目前这将定位所有将是多个子元素，如果它是一个动态条形图）。 – crm 2013-12-14 06:55:51

这工作（我只测试即& 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>

希望帮助。

来源

2010-01-06 18:05:31 pstanton

-6

如果你有多个子div的父Div的内部，则可以使用vertical-align属性类似如下：

.Parent div 
{ 
    vertical-align : bottom; 
}

来源

2011-12-16 07:46:05 Pawan

为什么这么多评论没有评论呢？它不能解决问题吗？在线研究表明它应该。 – sholsapp 2014-02-10 21:19:18

垂直对齐仅适用于表格元素 – Alex 2015-04-14 10:50:49

旧的文章，但认为我会共享一个答案的人看。因为当你使用absolute事情可能会出错。我会做的是

HTML

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

CSS的

parentDiv{ 

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

这将只是坐在那底部的div备份到父DIV。安全对于大多数浏览器也

来源

2013-03-15 09:14:58

这将使childDiv一半位于parentDiv的底部。您需要至少在边距上使用-40px。它也是使用position的最佳实践：relative;在这种情况下为两个div。 – Augus 2013-05-30 13:39:49

使用表与表单元格的值的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

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

来源

2013-11-29 12:17:11 romiem

对于和表一样多的东西，有时这是最好的解决方案 – Sean256 2016-11-03 20:14:27

这对我来说是最好的解决方案 – bowlerae 2017-08-15 02:42:19

这真的是最好的解决方案，因为使用绝对定位的元素通常会改变父元素的高度 – hamncheez 2017-08-24 16:32:23

我有类似的东西，并得到它的工作有效添加一些填充顶部给孩子。

我确定这里有一些其他的答案会得到解决方案，但是我不能让他们在很多时间之后轻松地工作;相反，我最终选择了简洁优雅的padding-top解决方案，但对我来说似乎有些ha（（更不用说它设置的像素值可能取决于父级高度）。

来源

2014-10-24 01:35:52 cellepo

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

我知道这是不是一个新的答案，但我想这种方法，因为它使我发现我的解决方案发表评论，但作为新手，我不允许发表评论，只发布。

来源

2015-10-06 11:53:36

七年后，寻找垂直对齐依然引发这个问题，所以我会发布另一个我们现在可用的解决方案：flexbox定位。只需设置display:flex; justify-content: flex-end; flex-direction: column父DIV（证明在此fiddle以及）：

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

来源

2017-08-26 18:33:28 gcbenison

简单。正是我想要的。使用'align-items：flex-start;'如果你不想拉伸项目。 – Madhan 2017-09-09 18:25:03

对齐DIV的底部或基线

回答

相关问题