Html 将 div 定位到不同 div 的底部，而不使用 Absolute
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26124865/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Position div to bottom of a different div, without using Absolute
提问by user3506938
I have one div in another div. The inner div has margins of 0, auto to centralize it. However, I can't get it to float to the bottom without making it absolute. Is there anyway of making a relative div float to the bottom of a normal div?
我在另一个 div 中有一个 div。内部 div 的边距为 0，自动将其集中。但是，如果不让它绝对化，我就无法让它漂浮到底部。有没有办法让相对 div 浮动到普通 div 的底部？
回答by LcSalazar
Without using position: absolute, you'd have to vertically align it.
如果不使用position: absolute，则必须垂直对齐它。
You can use vertical-align: bottomwhich, according to the docs:
vertical-align: bottom根据文档，您可以使用which ：
The vertical-align CSS property specifies the vertical alignment of an inline or table-cell box.
Vertical-align CSS 属性指定行内或表格单元格框的垂直对齐方式。
So, either set the outer div as an inline element, or as a table-cell:
因此，要么将外部 div 设置为内联元素，要么设置为table-cell：
#outer {
height: 200px;
width: 200px;
border: 1px solid red;
display: table-cell;
vertical-align: bottom;
}
#inner {
border: 1px solid green;
height: 50px;
}<div id="outer">
<div id="inner">
</div>
</div>回答by Obed Marquez Parlapiano
Nowadays you can simply use display: flexfor all these alignment issues.
如今，您可以简单地display: flex用于所有这些对齐问题。
In your case you can simply make the parent a flex, flex-direction column(the default is row) and justify-content: flex-end. The advantage of this approach is that it also works if you have multiple items in the parent.
在您的情况下，您可以简单地将父级设置为 flex、flex-direction column（默认为 row）和justify-content: flex-end. 这种方法的优点是，如果父项中有多个项目，它也适用。
If you have multiple ones and want to have them all aligned from the beginning of the parent till the end, you can change justify-contentto another property such as space-betweenor space-evenly.
如果您有多个justify-content属性并且希望它们从父级的开头到结尾都对齐，您可以更改为另一个属性，例如space-betweenor space-evenly。
#outer {
height: 200px;
width: 200px;
border: 1px solid red;
display: flex;
justify-content: flex-end;
flex-direction: column;
}
#inner {
border: 1px solid green;
height: 50px;
}<div id="outer">
<div id="inner">
</div>
</div>回答by wizzfizz94
Add this styling to the inner div.
将此样式添加到内部 div。
position: relative;
top: 100%;
transform: translateY(-100%);
回答by JosephK
The only way I found, unless your content is a static-height, was to do it with jquery like so:
我发现的唯一方法，除非您的内容是静态高度，否则使用 jquery 这样做：
$(document).ready(function(){
inner_height = $('#inner-div').height();
outer_height = $('#outer-div').height();
margin_calc = (outer_height - inner_height)
$('#inner-div').css('margin-top', (margin_calc+'px'));
});
This will work for a column-div within a containing-div, if another column's height is larger.
如果另一列的高度更大，这将适用于包含 div 中的列 div。
It is unbelievable this simple thing is not 'built in' via a css-property (i.e. "float: bottom"), that doesn't break everything else with absolutes, etc.
令人难以置信的是，这个简单的东西不是通过 css 属性“内置”的（即“浮动：底部”），这不会用绝对值等破坏其他一切。
回答by devCra
See this,
看到这个，
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
}
回答by Designaroni
You can do this by setting to top value to 100%.
您可以通过将最高值设置为 100% 来做到这一点。
Html
html
<div class="outer">
<div class="inner"></div>
</div>
CSS
CSS
.outer {height:400px;width:400px;background:#eaeaea;}
.inner {position:relative;top:100%;height:50px; width:50px; background:#fad400;}
check out this fiddle here: http://jsfiddle.net/62wqufgk/
在这里查看这个小提琴：http: //jsfiddle.net/62wqufgk/
