web布局固定宽度+变化宽度实现思路

前言

页面当中常规布局我想大家都会的，但有些布局是常规布局中实现不了的，比如变宽和固宽结合的，需要实现(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-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;
}
复制代码