css div底部对齐 |css收缩菜单

首先，大家可以使用flex布局来实现DIV底部对齐。请看下面的代码：

.container {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 300px;
}
.item {
width: 100px;
height: 50px;
}

在.container容器中，大家通过设置display为flex，可以实现flex布局。并且通过设置flex-direction为column，可以将所有的子项垂直排列。接着，通过设置justify-content属性为space-between，可以使得所有子项在容器中留有上下间隔。最后，设置容器的高度为300像素。在.item中，大家仅仅设置了子项的长宽。

通过使用上述代码，大家可以实现DIV底部对齐。但是，需要注意的是，如果子项的高度多于容器的高度，则容器的高度会自动以子项的高度为准。同时，大家还需要注意浏览器兼容性的问题。

除了使用flex布局外，大家还可以使用position属性来实现DIV底部对齐。请看下面的代码：

.container {
position: relative;
height: 300px;
}
.item {
position: absolute;
bottom: 0;
width: 100px;
height: 50px;
}

在.container中，大家设置position属性为relative，同时将容器的高度设置为300px。在.item中，大家将position属性设置为absolute，并将底部对齐的基准点设置为0，即底部与容器底部对齐。当然，大家还需要设置子项的长宽。

通过上述两种方法，大家可以很容易地实现DIV底部对齐的效果。而大家需要根据具体情况来选择使用哪种方法，以达到最佳的效果。