CSS布局 左固定右自適應的幾種方法

2021-09-29 20:07:55 字數 1770 閱讀 5379

實現乙個左右布局，左邊固定寬度200px，右邊自適應寬度。

html

固定寬度200px


自適應寬度
css

.fixed


.auto
float會脫離正常流的規則，右側的塊級元素會自動向父級元素靠攏，這個時候再設定padding-left把內容推出來就可以了。

然後說一下這個box-sizing這個屬性，當乙個容器寬度定義為 width:100%; 之後，如果再增加 padding 或者 border 則會溢位父容器，是向外擴張的。

如果使用該樣式，指定為 box-sizing: border-box; 則 padding 和 border 就不會再溢位，而是向內收縮的。

html

固定寬度200px


自適應寬度
css

.l1


.r1
flex布局父元素盒子的寬度不夠分時會自動壓縮盒子，而我們給左側設定flex-shrink屬性表示我不參與壓縮，我是一塊臭鐵。

html

固定寬度200px


自適應寬度
css

.wrap-flex


.l2.r2
html

固定寬度200px


自適應寬度
css

.wrap-margin


.l3.l2
首先我們需要把兩個塊級元素變成兩個行內塊級元素，這樣就能夠讓他們成為同一行。把父元素字型大小設定為0可以解決兩個塊之間的空隙 。然後右側寬度設定成100%，用margin-left把塊擠到右邊，再用padding-left把內容擠出來。

不過會出現乙個問題，就是右側會把左側覆蓋一部分。我們要想辦法讓左側優先順序大於右側，z-index不好用，因為兩個都是正常流的元件。把左側設定position就可以解決這個問題。

html

固定200px


自動充滿
css

.wrap-position


.l4.r4
利用position定位，這個應該不難理解，給左側 l3新增position: relative; z-index: 1;是因為避免被右側覆蓋了（兩個同樣設定了position，當左側 z-index >= 1時，該層級比沒有設定z-index的要高）

html

固定200px


自動充滿
css

.wrap-position


.l4.r4
這也是個十分簡單的方法，利用bfc特性：bfc的元素不能與浮動元素重疊

由於給右側加了overflow: hidden;使之變成乙個bfc，所以不會和左側的浮動發生重疊，盒子預設就是撐滿螢幕，所以不用手動設定寬度。

布局左固定右自適應

存在乙個問題就是當螢幕縮小至一定寬度的時候，邊框欄會被擠開 1body 67 8margin 0 auto 9 11 12background color bd9c8c 13 15.header 2324 2526 width 80 27margin 0 auto 28 29.main conten...

CSS布局中左（右）寬度自適應，右（左）寬度固定

設定左側寬度為200px，向左浮動 設定右側margin right，為左側盒子寬度 header content left content right footer class header logo div class content class left 固定寬度div class right...

二列左列寬度固定，右列寬度自適應布局

左邊固定值，右邊百分比佔完整螢幕的方法。1 用table當然很簡單了，左邊td固定值，右邊100 就ok了 2 div就不知道咋弄了，右邊100 肯定不能float到一行上去了。只好用js判斷瀏覽器的寬度然後減去左邊的寬度。3 不知道有沒有更好的解決辦法。2 xml lang zh cn lang ...