多種方法實現左右固定,中間自適應的CSS布局

2022-05-10 13:22:49 字數 1174 閱讀 1447

布局是面試中常問的問題,尤其是這類的題目,怎麼答才好呢?

大多數人的第乙個方法是浮動,沒錯,浮動。第二個方法呢?你回答定位,沒錯。第三個方法呢?.... 第四個方法呢?第五個方法呢?....

其實能想起來兩個方法的人,這道題已經不及格了。所以呀,我來說幾種方法吧。

隨便多說一點,如果你懂語意化開發並且簡歷中提到,怎麼讓面試官知道呢?假如你寫了個介面,全是div,你簡歷中提到的語意化開發在哪呢?你是面試官你會怎麼想?
以下**用語意化書寫

最常見的,不說了

1.這是三欄布局中間部分

2.這是三欄布局中間部分

不多說

1.這是三欄布局中間部分

2.這是三欄布局中間部分

其實稍微想一下就能想到這個flex布局,article的display設定為flex,左右div寬度固定,中間div的flex屬性設定為1,讓其自動填充剩下的空間

1.這是三欄布局中間部分

2.這是三欄布局中間部分

這種方法也不難想到,移動端有了flex這種神器,table-cell就有點落伍了。方法就是將article的display設定成table,article下的所有div的display設定成table-cell,把不需要自適應的div給個寬度就可以了。

順便說以下,table**中的單元格最大的特點之一就是同一行列表元素都等高,所以等高布局就可以用到了。

**在這

1.這是三欄布局中間部分

2.這是三欄布局中間部分

這種不太常用,不過用過的同學想起來也不難,既然是網格布局,那就把article的display設定為grid唄,既然是網格,那就要有行和列?既然有行和列,就可以設定行和列的寬高吧?所以這兩個屬性就來了grid-template-rows和grid-template-columns,不懂的可以看看下面的這個文章

1.這是三欄布局中間部分

2.這是三欄布局中間部分

左右固定中間自適應布局

1.這是三欄布局中間部分 2.這是三欄布局中間部分 1.這是三欄布局中間部分 2.這是三欄布局中間部分 其實稍微想一下就能想到這個flex布局,article的display設定為flex,左右div寬度固定,中間div的flex屬性設定為1,讓其自動填充剩下的空間 1.這是三欄布局中間部分 2.這...

聖杯布局(左右固定,中間自適應)

flex布局 class container class left class center class right 定位,定位元素 脫離文件流了 浮動布局 class layout float class left right center class left class right class...

多種方法實現自適應布局

最近切了幾個手機端的網頁,第一次切的是美團的首頁,為了自適應不同的手機解析度,需要用到自適應布局,切圖的時候是用的第一中方法,用到了定位,後來查詢了一些其他方法,現在就介紹幾種自適應布局的實現方法 美團網頁頭就用到了自適應 html部分 1 div class main 2 div class di...