对齐一个盒子，在底部而不是顶部

Question

我正在寻找一种方式来将div对齐到底部而不是顶部，例如，如果您尝试使用class =“box”来移除部分div， “在这个小提琴

目前代码：

#holder { 
    height: 220px; 
    width: 50px; 
    background-color: #000000; 
    padding: 5px 10px 10px 10px; 
} 

.box { 
    height: 50px; 
    width: 50px; 
    background-color: #ffffff; 
    margin-top: 5px; 
} 

它会从底部移除格，我想改变这种行为，以便从顶部移除来代替。

http://jsfiddle.net/79L7Lud7/

Answer 1

页面元素流从顶部到底部，从左至右。

要操纵这一点，您基本上需要将元素从正常流程中取出，并且position：absolute是执行此操作的更简单方法之一。

例如：

#holder {position: absolute; bottom: 0;} 

唯一额外你需要使用这种方法是一种外部支架预留页面空间。

http://jsfiddle.net/79L7Lud7/4/

Answer 2

一般来说元件对准对于其它元件的顶部。对齐底部的最好方法是将您所称的“保留”元素视为表格，然后您可以将元素对齐到底部。

#holder { 
    display:table-cell; 
    vertical-align: bottom; 

    height: 220px; 
    width: 50px; 
    background-color: #000000; 
    padding: 5px 10px 10px 10px; 

}

请参阅小提琴http://jsfiddle.net/79L7Lud7/3/。

这不适用于IE7。对于IE7支持，您可能想要考虑绝对定位。

https://css-tricks.com/absolute-positioning-inside-relative-positioning/

http://jsfiddle.net/79L7Lud7/3/