左右布局並且左邊固定寬度的幾種實現辦法

2022-07-25 12:39:12 字數 1692 閱讀 2413

布局後的樣子就是長這樣:

以下是讓布局長這樣子的一些方法

1.左邊設定position為absolute,右邊margin-left,右邊的div不設定寬度,在它的子元素設定寬度100%,具體看下面**

<

body

>

<

div

style

="width: 200px;height:100px;position: absolute;background: gray;"

>固定200px

div>

<

div

style

="margin-left: 200px;"

>

<

div

style

="background: yellowgreen;height:100px;width: 100%;"

>填充滿剩下的寬度

div>

div>

body

>

2.兩邊都設定position為absolute,具體如下:

<

body

>

<

div

style

="width: 200px;height:100px;position: absolute;background: gray;top: 0;left: 0;"

>固定200px

div>

<

div

style

="height:100px;position: absolute;top: 0;left: 200px;right:0;background: yellowgreen;"

>填充滿剩下的寬度

div>

body

>

3.接下去這種很好用,利用display:table和display:table-cell,在左邊的子元素種設定想要的寬度。現在很多左側導航等會設定在一定條件下隱藏,然而左側隱藏後還要調整右側才能達到良好的顯示效果。現在有了這種就不需要調整右側了,因為左側display:none後,右側會自動填充滿。不過一定要注意給最外層的div加上width:100%,雖然如果不加,在左側不隱藏時沒什麼關係,但是一旦左側隱藏,右側就無法填充滿了。

<

div

style

="display: table;width: 100%;"

>

<

div

style

="background: gray;display: table-cell;height: 100px;"

>

<

div

style

="width: 200px;"

>固定200px

div>

div>

<

div

style

="background: yellowgreen;display: table-cell;width: 100%;height: 100px;"

>填充滿剩下的寬度

div>

div>

網頁布局(左邊固定寬度)

123 7353637 38看見了看見離開家離開家破誒 兩口 兩口卡計畫看看見了看見離開家離開家破誒 兩口 兩口卡計畫看看見了看見離開家離開家破誒 兩口 兩口 3940 看見了看見離開家離開家破誒 兩口 兩口卡計畫看看見了看見離開家離開家破誒 兩口 兩口卡計畫看看見了看見離開家離開家破誒 兩口 兩口...

兩欄布局,左邊固定寬度,右邊自適應

no.1 使用浮動 float left right use float left use float right 實現效果 no.2 使用浮動 flex left right use flex use flex flex left use flex flex right 實現效果 no.3 使用浮...

三欄布局方案 左右寬度固定,自適應布局

一 absolute margin id content id main 主內容欄自適應寬度div id left 左側邊欄固定寬度div id right 右側邊欄固定寬度div div main left,right left right 這裡的左中右三個div的順序是可以任意調整的,這與剩下的...