CSS两列布局的N种实现

左右两侧元素都自适应
　　严格来讲，并不算两个元素都是自适应，只是将上面的定宽改为由子元素撑开而已

1.浮动+BFC
　　　　原理和上面一样，只是左侧元素的宽度没有设置，由子元素撑开

2.table布局
　　　　原理：父元素display:table,左侧元素外围用一个div包裹，该div设置display:table-cell，width:0.1%（保证最小宽度），左侧元素内部设置margin-right，右侧元素设置display:table-cell。

缺点：IE7及以下不支持，当display:table时，padding失效，父元素的line-height属性失效，当display:table-cell时，margin失效。

　　3.flex布局 　　　　原理、缺点同上面的flex布局

4.grid布局
　　　　原理：父元素设置display：grid，grid-template-columns:auto 1fr;（这个属性定义列宽，auto关键字表示由浏览器自己决定长度。fr是一个相对尺寸单位，表示剩余空间做等分）grid-gap:20px（行间距）

缺点：兼容性太差，IE11都不支持，谷歌57以上才可以

1111111111111111111111111

亚马逊测评 www.yisuping.com