固宽&&变宽布局

前言

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