html 兩列布局之寬度高度自適應解析(妙)

2021-10-22 03:11:49 字數 617 閱讀 1187

在我們整個pc端的專案上,有很多的主頁面布局採用的是兩列布局,左側定,右側自適應;或者右側定,左側自適應

左邊寬度:

那麼很多人問,如果我們需要高度自適應怎麼處理,安排

這個和下面三個不一樣,除了去掉父級高度除外,還需要設overflow:hidden;還需要給左右兩側加這個類

.row

可以動手試試,很妙

**不動,把父級的高度去掉即可支援

**不動,把父級的高度去掉即可支援

**不動,把父級的高度去掉即可支援

兩列布局 兩列寬度均自適應)

公司專案需要使用兩列布局,要求左右列寬度自適應,左列高度隨著內容自動出現滾動條,網上的方案有很多種,研究了一下採用float bfc的解決方案。最終實現效果如圖 原理 浮動元素的塊狀兄弟元素會無視浮動元素的位置,盡量佔滿一整行,這樣該兄弟元素就會被浮動元素覆蓋。若浮動元素的塊狀兄弟元素為bfc,則不...

html 三列布局(兩列自適應,一列固定寬度)

原文 html 三列布局 兩列自適應,一列固定寬度 不做過多解釋 主要是記錄乙個完整的布局樣式,實現頁面大致三列其中左右兩列是自適應寬度,中間固定寬度效果。不多少 奉上 公共標籤樣式 main 外邊框自適應區域 main title 標題 main title 頭部文號區 70px content ...

html 三列布局(兩列自適應,一列固定寬度)

不做過多解釋 主要是記錄乙個完整的布局樣式,實現頁面大致三列其中左右兩列是自適應寬度,中間固定寬度效果。不多少 奉上 公共標籤樣式 main 外邊框自適應區域 main title 標題 main title 頭部文號區 70px content title 區域塊設定 area area left...