使用CSS怎么实现底部对齐

　　介绍

这篇文章将为大家详细讲解有关使用CSS怎么实现底部对齐,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。

效果说明:

1,红色区域数据需要倒排(即从底部开始数,数字为1,2,3,4,5),并且显示在最底部
2,当数据过多时需要显示滚动条,* *并且滚动条需要拉到最底部* *
3,数据从websocket中推送过来,推送间隔为几十毫秒
4,需要兼容ie10及以上浏览器

使用flex布局实现

& lt; style> 　　,,,* { 　　,,,,,,,保证金:,0; 　　,,,,,,,填充:,0; 　　,,,,,,,box-sizing:, border-box; 　　,,,} 　　,,,.container { 　　,,,,,,,位置:,相对; 　　,,,,,,,宽度:,300 px; 　　,,,,,,,身高:,500 px; 　　,,,,,,,保证金:,10 px 汽车; 　　,,,,,,,边界:,1 px  solid  #法郎; 　　,,,,,,,颜色:,# fff; 　　,,,} 　　直,,,上, 　　,,,.bottom { 　　,,,,,,,身高:,50%; 　　,,,,,,,填充:,20 px; 　　,,,} 　　直,,,上{ 　　,,,,,,,背景颜色:,# da2e22; 　　,,,} 　　,,,.top> ul { 　　,,,,,,,宽度:,100%; 　　,,,,,,,身高:,100%; 　　,,,,,,,溢出:,汽车; 　　,,,} 　　,,,.bottom { 　　,,,,,,,溢出:,汽车; 　　,,,,,,,背景颜色:,# 1 e1e1e; 　　,,,} 　　& lt;/style> & lt; div 类=癱ontainer"比; 　　,,,& lt; div 类=皌op"比; 　　,,,,,,,& lt; ul 风格=皃adding-top:, 104 px;“比; 　　,,,,,,,,,,,& lt; li>我是第1个李元素& lt;/li> 　　,,,,,,,,,,,& lt; li>我是李第2个元素& lt;/li> 　　,,,,,,,,,,,& lt; li>我是李第3个元素& lt;/li> 　　,,,,,,,,,,,& lt; li>我是第4个李元素& lt;/li> 　　,,,,,,,,,,,& lt; li>我是李第5个元素& lt;/li> 　　,,,,,,,& lt;/ul> 　　,,,& lt;/div> 　　,,,& lt; div 类=癰ottom"比; 　　,,,,,,,& lt; ul> 　　,,,,,,,,,,,& lt; li>我是第1个李元素& lt;/li> 　　,,,,,,,,,,,& lt; li>我是李第2个元素& lt;/li> 　　,,,,,,,,,,,& lt; li>我是李第3个元素& lt;/li> 　　,,,,,,,,,,,& lt; li>我是第4个李元素& lt;/li> 　　,,,,,,,,,,,& lt; li>我是李第5个元素& lt;/li> 　　,,,,,,,& lt;/ul> 　　,,,& lt;/div> 　　& lt;/div>

使用flex布局是目前最好的解决办法,子元素布局还是按照1,2,3,4,5这样的顺序进行布的局,浏览器器在渲染时会自动反转过来,并且滚动条也会反转过来,即自动定位到最底部。但的问世是目前为止还不支持~,所以在我做的这个项目中是用不了的了,只能另辟蹊径。

<强>使用padding-top实现

& lt; style> 　　,,,* { 　　,,,,,,,保证金:,0; 　　,,,,,,,填充:,0; 　　,,,,,,,box-sizing:, border-box; 　　,,,} 　　,,,.container { 　　,,,,,,,位置:,相对; 　　,,,,,,,宽度:,300 px; 　　,,,,,,,身高:,500 px; 　　,,,,,,,保证金:,10 px 汽车; 　　,,,,,,,边界:,1 px  solid  #法郎; 　　,,,,,,,颜色:,# fff; 　　,,,} 　　直,,,上, 　　,,,.bottom { 　　,,,,,,,身高:,50%; 　　,,,,,,,填充:,20 px; 　　,,,} 　　直,,,上{ 　　,,,,,,,背景颜色:,# da2e22; 　　,,,} 　　,,,.top> ul { 　　,,,,,,,宽度:,100%; 　　,,,,,,,身高:,100%; 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null

使用CSS怎么实现底部对齐