命题：
<div class="parent"> <div class="left"> <p>left</p> </div> <div class="right"> <p>right</p> <p>right</p> </div> </div>问题一：一列定宽及一列自适应
方案1：
.left{ float:left; width:100 px; } .right{ margin-left : 120 px; }缺点：1.ie6里会产生3px的bug，即right里的文字会向右缩进3px。解决方案：.left{margin-right:-100px;}
2.如right上加上了清除浮动，会掉到下一行。
改进方案：
//html<div class="parent"> <div class="left"> <p>left</p> </div> <div class="right-fix"> <div class="right"> <p>right</p> <p>right</p> </div> </div> </div>//style .left{ float:left; width:100 px; position:relative; //提高left层级 } .right-fix{ float:right; width:100%; margin-left:100px;} .right{ margin-left : 120 px; }优点：兼容性好
缺点：结构复杂
方案2：
.left{ float:left; width:100 px; margin-right:20px } .right{ overflow:hidden; //触发BFC模式 }BFC：block formating contact快速格式化。与外面格式隔离
缺点：IE6不支持
方案3：
.parent{ display:table; width:100%; //table默认宽度以内容为准，每列的宽度之和为table总宽 table-layout:fixed; //提高渲染速度，实现了布局优先 } .left,.right{ display:table-cell; //设为单元格 不能设margin } .left{ width: 100 px; padding-right:20px; }方案4：
.parent{ display:flex; } .left{ width: 100 px; margin-right:20px; } .right{ flex:1; //相当于flex:1 1 0; 剩余空间都给了right }缺点：1.低版本浏览器中有兼容性问题；
2.由于flex是根据内容调整宽度，因此可能性能有问题
注意：尽量只在不太复杂的地方运用flex
问题一：多列定宽及一列自适应
一般只需将定宽的列写同一格式，即用同一个style
总结：注意兼容性，及掌握元素特性。
转载于:https://www.cnblogs.com/july-Vivian/p/4614687.html
相关资源：web前端开发中常见的多列布局解决方案整理(一定要看)