CSS实现底部对齐的方式有多种

时间：2023-04-05 21:47:09 HTML5

CSS实现底部对齐的效果由于公司业务需求，需要实现下图红色区域的效果：效果说明：1.红色区域的数据需要倒置（即从底部数起，编号为1,2,3,4,5），显示在底部2。当数据过多时，出现滚动条需要显示，**并且滚动条需要拉到底部**3.数据从websocket推送，推送间隔几十毫秒4.需要兼容ie10及以上浏览器使用flex布局实现

我是第一个li元素

我是第二个li元素

我是前3个li元素

我是第4个li元素

我是第5个li元素

我是第一个li元素
我是第二个li元素
我是第三个li元素
我是第四个li元素
我是第5个li元素

使用flex布局是目前最好的方案，子元素布局还是按照1,2,3,4,而5是按顺序排列的，浏览器在渲染的时候会自动反转，滚动条也会反转，也就是自动定位到底部，但是IE10目前还不支持~，所以当我做这个项目用不了，只能另想办法了。使用padding-top实现

我是第一个li元素

我是第二里元素

我是第三里元素

我是第四里元素

我是第五里元素