本文共 2083 字,大约阅读时间需要 6 分钟。
来源 | http://www.fly63.com/article/detial/9541
两列布局分为两个,一种是垂直定宽,右侧自适应,另一种是两列都自适应(即纵向宽度由子元素决定,右侧补齐剩余空间)。
在css面试题里面属于常考题,也是一个前端开发工程师必须掌握的技能,下面将分别介绍实现方式。
原理:两个元素都设置dislpay:inline-block,为了消除HTML空间的影响,父元素的字体大小需要设置为0,正确匹配元素的宽度使用计算函数计算。如果两个元素的高度不一样,可以给元素设置vertical-align:top调整。
缺点:由于父元素设置了font-size为0,子元素内文字不会显示。
12341234
原理:两个元素设置浮动,右侧自适应元素宽度使用calc函数计算
缺点:父元素需要清除浮动
123adadadddddddddddddddddddddddddddddddddddddddd
原理:预设定宽元素浮动,右侧自适应元素设置margin-left的值大于定宽元素的宽度即可
缺点:父元素需要清除浮动。
1234
1234
原理:父元素设置溢出:隐藏,左侧定宽元素浮动,右侧自适应元素设置溢出:自动创建BFC
缺点:前端元素的内容如果超过设定宽度会重叠到右侧元素上。
111111111111111111111111111111111111111111111111111111111111111111111
原理:父元素相对定位,垂直元素绝对定位,右侧自适应元素设置margin-left的值大于定宽元素的宽度
缺点:父元素设置了相对定位
原理:父元素设置display:flex,自适应元素设置flex:1
缺点:存在兼容性问题,IE10以下不支持
严格来说,并不算两个元素都是适应,只是将上面的定宽替换由子元素撑开而已
原理和上面一样,只是稍微元素的宽度没有设置,由子元素撑开
原理:父元素显示:表格,垂直元素外围用一个div包装,该div设置显示:表格单元格,宽度:0.1%(保证最小宽度),右侧元素内部设置margin-right,右侧元素设置显示:table-cell。
缺点:IE7及以下不支持,当display:tabletime,padding失效,父元素的line-height属性失效,当display:table-cell时,margin无效。
126545453dddddddd45345345312121
原理,缺点同上面的flex布局
原理:父元素设置显示:grid,grid-template-columns:auto 1fr;(这个属性定义列宽,auto关键字表示由浏览器自己决定长度。fr是一个相对尺寸单位,表示剩余空间做等分) grid-gap:20px(行间距)
缺点:兼容性太差,IE11都不支持,谷歌57以上才可以。
1111111111111111111111111
本文完~
转载地址:http://gdbpi.baihongyu.com/