css相關《自適應布局》

2021-08-14 20:14:32 字數 931 閱讀 7066

2. 左右兩邊定寬,中間自適應

class

="left"

>

div>

class

="right"

>

div>

方案一:float + margin
/*方案一:*/

.left

.right

方案二:float + calc
/*方案二:*/

.left

.right

class

="wrap"

>

class

="left"

>

div>

class

="right"

>

div>

class

="center"

>

div>

div>

方案一
/*方案一:*/

.wrap

.wrap > div

.left

.right

.center

方案二
/* 方案二: */

.left

.right

.center

方案三
/*方案三:*/

.wrap

.left

.center

.right

方案四
/*方案四: 注意:把center放在中間*/

.wrap

.left

.right

.center

CSS布局 自適應布局

網易雲課堂學習筆記二 自適應布局 1.float absolute margin left right2.float overflow left right 產生bfc3.table left,right 預設均分 left margin失效 4.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...