Question

我正在寻找一种方法来命令/将div对齐到底部而不是顶部，例如，如果您尝试使用class =＆＃34; box＆＃34;删除其中一些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;
}

它会从底部删除div，我想反转这种行为，所以它会从顶部删除。

http://jsfiddle.net/79L7Lud7/

Answer 1

通常，元素与其他元素的顶部对齐。与底部对齐的最佳方法是将“hold”元素视为表格，然后将元素对齐到底部。

#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/

Answer 2

页面元素从上到下，从左到右流动。

要操纵它，你基本上需要将元素从正常流中取出，而position：absolute是更简单的方法之一。

例如：

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

这种方法唯一需要的是外部支架来保留页面空间。

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

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

2 个答案: