CSS布局 自適應布局

2021-08-25 19:36:00 字數 1094 閱讀 4195

網易雲課堂學習筆記二:自適應布局

1.float(absolute)+margin

.left 

.right

2.float+overflow

.left 

.right //產生bfc

3.table

.left, .right //預設均分

.left //margin失效

4.flex

.left

.right

由 定寬+自適應 類推

1.float+margin

.left, .center 

.right

2.float+overflow

.left, .center 

.right

3.table

.left, .center, .right

.left, .center

4.flex

.left, .center

.right

1.float+overflow

.left 

.right //產生bfc

2.table

.left, .right //預設根據內容比例均分

.left //margin失效

3.flex

.left

.right

由 不定寬+自適應 類推

CSS 自適應布局

說明 左列固定右列自適應,也可以為右列固定左列自適應,常見於中臺管理介面 移動端web的列表展示等等。固定寬度 自適應 說明 左邊的固定列設定為 float left,右邊的自適應列設定為 float none。css container left right 說明 自適應列的width根據calc...

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

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

css相關《自適應布局》

2.左右兩邊定寬,中間自適應 class left div class right div 方案一 float margin 方案一 left right 方案二 float calc 方案二 left rightclass wrap class left div class right div c...