Question

我试图看看是否可以从底部到顶部浮动html DOM元素，而不是通常的从上到下的方法。

通过这种方法，我想要做的是当一个div元素放在另一个上面时，如果我们实时隐藏顶部元素，我希望底部元素从底部向下浮动，而不是向上浮动

这是一个工作小提琴http://jsfiddle.net/6XG87/1/，如果点击“隐藏红色”，你可以看到底部的蓝色元素浮动。我在css中尝试了vertical-align:bottom，但是没有用。

还有其他css方法可以使这个功能正常工作吗？

Answer 1

喜欢这个

<强> demo

<强> demo1

<强> CSS

#inner2{
    height:80%;
    background:blue;
    vertical-align:bottom;
position:absolute;
    bottom:0;
    width:100%;
}

Answer 2

您可以解决此设置

.outerContainer, .outerContainer div {
    -webkit-transform: scaleY(-1);    
    transform: scaleY(-1);    
}

（并删除对齐底部。）。

它使容器反转，但物品反转，使它们朝上

fiddle

您也可以使用flex系统获得此功能，但旧浏览器支持较弱。

Answer 3

使用display:table-cell和vertical-align:middle

进行试用

使用外层来应用position:absolute，因为table-cell无法与绝对位置正确对齐。

<强> HTML

<div class="wrapper">
  <div class='outerContainer'>
    <div id='inner1'></div>
    <div id='inner2'></div>
  </div>
</div>

<强> CSS

.wrapper{
       position:absolute;
        bottom:0;
        left:100px;
    }
    .outerContainer{
        width:20px;
        height:200px;
        position:relative;
        display:table-cell;
        vertical-align:bottom;
        border:aqua 1px solid
    }

<强> DEMO

使div在HTML中从底部浮动

3 个答案: