多列布局之不定宽+自适应

多列布局之不定宽+自适应

说明
本文所述仅为主要样式
具体样式和HTML文件，请点击https://github.com/smilehht/Page-Framework/tree/master/Page%20framework

1、float+overflow

.left { float : left ; width :100px；margin : right； }
.right{ overflow : hidden ; }

width : 100px ; ——可变

2、table

.parent { display : table; width : 100% ; }
.left,.right { display : table-cell ; }
.left{ width : 0.1% ; padding-right : 20px; }

3、flex布局

.parent { display: flex ; }
.left { width : 200px ; margin-right : 20px ; }
.right { flex : 1 ; }