两列布局(左侧固定长度,右侧自适应)的几种方法

原创 那天山水共长生 随笔 作品 228阅读 2017-05-09 00:07:02 举报

1.display:table,这种情况下两列等高,以较高的高度为准.
html 代码

2.display:flex.或者是display:box;实际使用时注意兼容性.
html 代码

3.浮动.html 代码

4.绝对定位.
html 代码

5.calc(),同时要设置diplay:inline-block,(MB的在写的时候因为基准线的问题,会发现在两列不等高时的其他状况还要在设置vertical-align:top),它可以通过加减乘除(运算符号前后都要有空格)进行即使是不同单位(包括% ,px,em,rem)的长度计算,比如calc(100% - (10px + 5px) * 2)
同样需要注意不同浏览器兼容性写法,加前缀.在写的时候发现设置display:inline-block,之间会留有1像素空格.
在父元素里添加 {font-size: 0;
-webkit-text-size-adjust:none;}
html 代码

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复