多列布局

一列定宽 一列自适应	.parent{   } .left{float: left; width: 100px;} .right{margin-left: 120px;} 3像素BUG	.left{ float: left; width: 100px; position: relative; } .right-fix{ float: right; width: 100%; margin-left: -100px; } .right{ margin-left: 120px; }	.left{ float: left; width: 100px; margin-right: 20px; } .right{ overflow: hidden; }	.parent{ display: table; width: 100%; table-layout: fixed; } .left,.right{ display: table-cell; } .left{ width: 100px; padding-right: 20px; }	.parent{ display: flex; } .left{ width: 100px; margin-right: 20px; } .right{ flex: 1; }
一列不定宽 一列自适应	.parent{   } .left{ float: left; margin-right: 20px; } .right{ overflow: hidden; }	.parent{ 等高 display: table; width: 100%; } .left,.right{ display: table-cell; } .left{ width: 0.1%; padding-right: 20px; } .left p{ width:200px; }	.parent{等高 display: flex; } .left{ margin-right: 20px; } .right{ flex: 1; } .left p{width: 200px;}	P   { background: none!important; } .left, .right { background: #444;} .parent{overflow: hidden;} .left,.right{padding-bottom: 9999px; margin-bottom: -9999px;} .left{float: left; width: 100px; margin-right: 20px;} .right{overflow: hidden;}
等分与等高	.parent{ margin-left: -20px; } .column{ float: left; width: 25%; padding-left: 20px; box-sizing: border-box; }	.parent-fix{ margin-left: -20px; } .parent{ display: table; width:100%; table-layout: fixed; } .column{ display: table-cell; padding-left: 20px; }	.parent{ display: flex; } .column{ flex: 1; } .column+.column{ margin-left:20px; }