前言
页面当中常规布局我想大家都会的，但有些布局是常规布局中实现不了的，比如变宽和固宽结合的，需要实现(300px)＋(100%－300px)的两列布局。以下样式代码前提均为盒模型为border-sizing 的前提下。
html部分
复制代码左边内容
方案一：巧用浮动，比较麻烦，不建议
.main{ width:100%; overflow: hidden; height: 300px;}.main .left{ width:300px; float:left; height:300px; border:1px solid red;}.main .right{ width:100%; padding-right:299px; margin-right:-300px; margin-left:-1px; float:left; height:300px;}.main .right .rightCont { border: 1px solid green; height: 100%;}复制代码 方案二：巧用浮动，比较简单，建议
//父元素要清楚浮动.main{ width:100%; overflow: hidden; height: 300px;}.main .left{ width:300px; float:left; height:300px; border:1px solid red;}.main .right{ margin-left: 300px; height:300px; border:1px solid green;}复制代码 方案三：巧用定位，建议（整体布局实现）
.main{ width:100%; height: 300px; position: relative;}.main .left{ position:absolute; top:0; left:0; width:300px; height:300px; border:1px solid red;}.main .right{ position:absolute; top:0; left:299px;//同时设置左和右，得到的宽度即为100%-left-right right:0; height:300px; border:1px solid green; }复制代码 方案四：巧用定位，padding，建议 （同一个整体盒模型中建议使用）
.main{ width:100%; height: 300px; position: relative; padding-left:300px;}.main .left{ position:absolute; top:0; left:0; width:300px; height:300px; border:1px solid red;}.main .right{ margin-left:0px; height:100%; border:1px solid green;}复制代码 方案五：使用flex布局
.main{ height: 300px; display: flex; flex-direction: row; align-items: center;}.main .left{ border:1px solid green; flex-basis：300px; -webkit-flex-basis: 300px; height:100%;}.main .right{ flex-grow: 1; height:100%; border:1px solid green;}复制代码