是否有一个等价于float的CSS:down

Question

我想知道是否有某种CSS相当于:

float: down;

或某种方式使元素或div转到页面底部.任何帮助表示赞赏.

Answer 1

使用flexbox,您可以将子元素设置为align-self: flex-end.

这里的例子

.parent {
    display: flex;
}
.child {
    align-self: flex-end;
}

.parent {
    height: 200px;
    border: 5px solid #000;
    display: flex;
}
.child {
    height: 40px;
    width: 100%;
    background: #f00;
    align-self: flex-end;
}

<div class="parent">
    <div class="child">
        Align to the bottom
    </div>
</div>

或者,您必须使用absolute/ fixed定位.

这里的例子

.align-bottom {
    position: absolute;
    bottom: 0;
}

在某些情况下,您还必须相对定位父元素,以便绝对定位相对于它.

body {
    min-height: 100vh;
}
.align-bottom {
    position: absolute;
    bottom: 0;
}

<div class="align-bottom">Align to the bottom</div>