常見自適應布局

2022-07-10 02:00:07 字數 613 閱讀 1297

方法一:

左側盒子使用float浮動,固定寬度,右側盒子設定margin-left控制與左側的距離:

.left

.right

方法二:

左側盒子使用絕對定位absolute;固定寬度,右側盒子設定margin-left控制與左側的距離:

.left

.right

方法一:

左側盒子左浮動,margin-right為負值,值為右邊距==右側層的寬度的負值(左側撐開,使得兩個盒子共行), 右側盒子右浮動,固定寬度

.left

.right

方法二:

左側右側都使用絕對定位,右側固定寬度,父級設定相對定位:

.box

.left

.right

.left,.center,.right

.center

.left

.right

自適應布局

請你說一說你知道的所有web布局方式?1.浮動 float left right 2.inline block display inline block 行內塊級 3.flexible box 彈性盒子 display flex 4.grid display grid 5.絕對 相對布局 posit...

CSS布局 自適應布局

網易雲課堂學習筆記二 自適應布局 1.float absolute margin left right2.float overflow left right 產生bfc3.table left,right 預設均分 left margin失效 4.flex left right 由 定寬 自適應 類...

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

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