自適應布局分兩類：高度和寬度，方法有很多，我用三列布局舉例，我就列幾個通俗易懂的例子唄，懂了三列的，兩列的原理一樣，呵呵噠。
效果圖如下：高度自適應——寬度自適應
1,高度自適應布局
原理就是把每個模組設定為絕對定位，然後設定中間自適應的模組的top和bottom屬性的值分別為頭部模組和底部模組的高，然後中間模組的高度就自適應了。**如下：
html**：
<css**：body
>
<
div
class
="top"
>
120px
div>
<
div
class
="main"
>
自適應
div>
<
div
class
="bottom"
>
120px
div>
body
>
.top.main.bottom2,寬度自適應，有三種方法，分別是用絕對定位；利用margin，中間模組先渲染；自身浮動。
a，用絕對定位來設定寬度自適應布局，原理：針對自適應模組使用絕對定位，在把left和right設定為左右兩列的寬，其實原理和高度自適應一樣，另外左右兩列分別左右浮動。
html**：
<css**：body
>
<
div
class
="left"
>
200px
div>
<
div
class
="main"
>
自適應
div>
<
div
class
="right"
>
200px
div>
body
>
html,b，中間一列優先渲染的自適應三列布局，優先渲染（載入）的關鍵：內容在html裡面必須放在前面。自適應的div必須放在left和right前面且包含在乙個父div裡。父div，left和right模組都向左浮動，然後對自適應的div（就是父div裡的子div）設定margin：0 200px，然後對left的margin-left的屬性值設定為100%的負數，就是margin-left：-100%；對right的margin-left的屬性值設定為自身寬度的負數，就是margin-left：-200px。body .left,
.right .left .right .main
注意：自適應的div必須放在left和right前面且包含在乙個父div裡。
html**：
<css**：body
>
<
div
class
="main"
>
<
div
class
="content"
>
自適應
div>
div>
<
div
class
="left"
>
200px
div>
<
div
class
="right"
>
200px
div>
body
>
html,c，自身浮動，原理：中間列設定margin屬性，就是把左右列分別左右浮動。注意：使用這個方法布局自適應的話，必須把自適應的那一列在html中放在left和right後面。body .main .main .content .left,
.right .left .right
html**：
<css**：body
>
<
div
class
="left"
>
200px
div>
<
div
class
="right"
>
200px
div>
<
div
class
="main"
>
自適應
div>
body
>
html,body .main .left,
.right .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...