前言

页面当中常规布局我想大家都会的，但有些布局是常规布局中实现不了的，比如变宽和固宽结合的，需要实现(300px)＋(100%－300px)的两列布局。以下样式代码前提均为盒模型为border-sizing 的前提下。

html部分

<div class="main"><section class="left">左边内容	</section><section class="right"><div class="rightCont">右边内容</div>			</section>
</div>
复制代码

方案一：巧用浮动，比较麻烦，不建议

.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-rightright: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;
}
复制代码