display:flex(注意:所有相关属性都需要加-webkit-前缀)
#website ul:first-child { display:-webkit-box; box-pack:justify; -webkit-box-pack: justify; display:flex; display:-webkit-flex; justify-content: space-between; -webkit-justify-content: space-between;} 对于支持flex的布局,绿色代码会进行重置,最终显示绿色代码 效果;对于不支持flex的浏览器,执行蓝色代码,绿色代码被忽略,最终显示 蓝色代码效果。 注意:li中要加上clearfix类,清除 垂直方向外边距重合。(不支持flex布局的浏览器,li设置的margin-top无效) 伸缩盒布局堪称布局神器,有过3次演变历史: 09:box 11:flexbox 12:flexbox基本所有浏览器都支持,但是似乎已经淘汰。flex是目前最新的属性。
时间: 2024-11-09 04:21:46