分享幾個自適應布局方式（持續更新）

1.上下高度固定 中間內容區域自適應

實現方式，上下固定高度，底部絕對定位，中間區域絕對定位，設定top,bottom值為上下部分高度。

class="

top">
class="
main
">
class="
bottom
">

（顏色辣眼睛。。。。）

2.左邊寬度固定，右邊寬度根據螢幕寬度自適應

實現方式，如下：

class="

left
">
class="
right
">

當然，如果右邊還有固定的部分，只需要給中間部分 加上 margin-right：value；就可以實現自適應了；

另外實現這種布局還有一種很好的方法，一般用在移動端，就是flex布局

自適應布局

請你說一說你知道的所有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...