前言

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

總結

以上是生活随笔為你收集整理的web布局固定宽度+变化宽度实现思路的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。