css常用左右布局方案整理

2022-06-21 18:30:10 字數 1539 閱讀 7710

實際專案開發過程中我們經常會遇到頁面div左右布局的需求:左側 div 固定寬度,右側 div 自適應寬度,填充滿剩餘頁面,下面整理幾種常用的方案 

1 左側 div 設定float屬性為left,右側 div 設定margin-left屬性等於或大於左側 div 寬度

1 左側 div 設定 float 屬性為 left,右側 div 設定 margin-left 屬性等於或大於左側 div 寬度

left

right

實際效果: 

2 左側 div 設定float屬性為left,負邊距 100%,右側 div中巢狀乙個 div,頁面內容放入巢狀的 div 中,右側內嵌 div 設定margin-left屬性等於或大於左側 div 寬度

2左側 div 設定 float 屬性為 left,負邊距 100%,右側 div 中巢狀乙個 div,頁面內容放入巢狀的 div 中,右側內嵌 div 設定 margin-left 屬性等於或大於左側 div 寬度

left

right

實際效果: 

3 如果將需求修改為右側固定寬度而左側自適應寬度

3 如果將需求修改為右側固定寬度而左側自適應寬度

left

right

實際效果: 

4 左邊左浮動,右邊overflow:hidden 不過這種方法ie6下不相容

左邊左浮動,右邊overflow:hidden 不過這種方法ie6下不相容

left

right

實際效果: 

5 左邊使用絕對定位,右邊使用margin-left

左邊使用絕對定位,右邊使用margin-left-最外層需要設定相對定位

left

right

實際效果: 

6 左邊絕對定位,右邊也絕對定位

左邊絕對定位,右邊也絕對定位

left

right

實際效果: 

CSS布局 四 左右布局

左邊固定,右邊自適應的兩欄布局。基本樣式 高度有可能會很小,也可能很大。這裡的內容可能比左側高,也可能比左側低。寬度需要自適應。基本的樣式是,兩個div相距20px,左側div寬 120px padding 15px 20px border 1px dashed ff6c60 left right ...

css三欄布局方案整理

日常開發中,經常會用到css三欄布局,現將工作中常用的css 三欄布局整理如下 什麼是三欄布局 三欄布局,顧名思義就是兩邊固定,中間自適應。一 float布局 float布局 最簡單的三欄布局就是利用float進行布局 優勢 簡單 劣勢 中間部分最後載入,內容較多時影響體驗 二 bfc 規則 bfc...

右邊自適應 左右布局 css左右自適應布局

如果有這麼乙個表單需求,前面是乙個名稱,中間是乙個表單,右側是乙個按鈕或者乙個字串。需要自適應布局,名稱為固定長度,右側也是固定,中間部分自適應整個width。先來看看html標籤1 6 年齡歲 首先,我想到的有這麼幾種display,乙個是inline block。於是css就變成這樣1.name...