前言

頁面當中常規布局我想大家都會的，但有些布局是常規布局中實現不了的，比如變寬和固寬結合的，需要實現(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;
}
復制代碼