位置div到不同div的底部，不使用绝对

Question

我在另一个div中有一个div。内部div的边距为0，自动将其集中。但是，我无法让它在没有绝对的情况下浮到底部。有没有办法让一个相对的div浮动到正常的div底部？

Answer 1

不使用position: absolute，你必须垂直对齐它。

可以使用vertical-align: bottom，其根据the docs：

的垂直对齐CSS属性指定内嵌或表格盒的垂直对准。

所以，要么设置外层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>

Answer 2

你可以通过设置到最高值100％的做到这一点。

的Html

<div class="outer"> 
<div class="inner"></div> 
</div> 

CSS

.outer {height:400px;width:400px;background:#eaeaea;} 
.inner {position:relative;top:100%;height:50px; width:50px; background:#fad400;} 

检查出这个小提琴这里：http://jsfiddle.net/62wqufgk/

Answer 3

这种样式添加到内部DIV。

position: relative; 
top: 100%; 
transform: translateY(-100%); 

Answer 4

我发现的唯一办法，除非你的内容是静态的高度，是用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')); 
}); 

这将为列-DIV一，载有内工作div，如果另一列的高度较大。

令人不可思议的是这种简单的事不是通过CSS属性“内置”（即“浮动：底部”），不打破一切与绝对，等

Answer 5

现在，你可以简单地所有这些对齐问题都使用display: flex。

在你的情况下，你可以简单地让父母弯曲，弯曲方向column（默认是行）和justify-content: flex-end。这种方法的优点是，如果父项中有多个项目，它也可以工作。

如果您有多个并且希望从父母的开始到结束都对齐它们，则可以将justify-content更改为另一个属性，例如space-between或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>