最近在写一个页面,看到这个页面的时候脑海中第一反应ul li创建4个li,然后进行浮动,然后继续想这个该怎么布局才好写
最后没有用ul li写改用div,创建4个大div然后再把这个分成上下2个div ,写完样式浮动后我发现这个图的企业文化和招贤纳什2个图片的中间有一个比较大的间隔,我把margin,padding设置为0还是没用,然后我去百度百度说有2中方案
1.将子元素设置成display: block;
2.在父元素中设置font-size:0,用来兼容chrome,而使用letter-space:-N px来兼容safari。
结果还是无果觉得重新写改用弹性布局顺便把布局也都改了
感觉一个小图片组合的布局用6 7个div很不好,然后重新改用ul li布局,创建一个div包裹ul li,还是4个li在第3个li里面在创建一个ul 2个li 和一个div,2个li放2个小图下面div放一个大图,然后跟div和ul设置 display: flex;大致框架基本已成,因为我一直以来都是用的浮动不怎么用弹性布局,经过这次感觉要合理的在不同的页面上运用不同的布局方式。
然后深入的了解了一下浮动于弹性布局的区别
浮动
浮动布局主要用于解决多个块元素共存于一行的问题。虽然浮动可以解决多个块元素共存一行的问题,但是也会有非常不好的影响。
影响一,浮动元素会脱离文档流,使用浮动技术后,还要清除浮动的影响。
<