将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,我将需要它们全部与基线/底部对齐.
Y. *_*ham 149
你需要添加这个:
#parentDiv {
position: relative;
}
#parentDiv .childDiv {
position: absolute;
bottom: 0;
left: 0;
}
声明absolute元素时,它根据其最近的父元素static(它必须是absolute,relative或fixed)定位.
- 我怀疑这是否符合他的要求,目前这将使所有人(看起来好像会有多个子元素,如果它是一个动态条形图)相互叠加. (7认同)
gcb*_*son 37
七年后,对垂直对齐的搜索仍然提出了这个问题,所以我将发布另一个我们现在可用的解决方案:flexbox定位.只需设置display:flex; justify-content: flex-end; flex-direction: column父div(在这个小提琴中演示):
#parentDiv
{
display: flex;
justify-content: flex-end;
flex-direction: column;
width:300px;
height:300px;
background-color:#ccc;
background-repeat:repeat
}
- 仅当您希望所有子元素底部对齐时，这才有效。 (2认同)
rom*_*iem 11
使用表和表格单元格的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
该演示还有一个示例,说明如何使用相同的技术进行垂直居中对齐.
这工作(我只测试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>
希望有所帮助.
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>
我意识到这不是一个新答案，但我想对这种方法发表评论，因为它引导我找到我的解决方案，但作为一个新手，我不允许发表评论，只能发帖。
您可能必须将子 div 设置为具有position: absolute.
将您的子样式更新为
#parentDiv .childDiv
{
height:100px;
width:30px;
background-color:#999;
position:absolute;
top:207px;
}
- 将 top 设置为 207 （某个任意数字）不是一个好主意，最好设置bottom:0 (5认同)
| 归档时间： |
|
| 查看次数： |
205699 次 |
| 最近记录： |