摘要:等高布局的方式指在同一個父容器中子元素高度相等的布局從等高布局實現方式來說又分為兩類偽等高子元素高度差依然存在只是視覺上給人感覺就是等高真等高子元素高度相等先來看看偽等高實現方式通過負和實現真等高實現方式偽等高之負和主要利用負來實現具體負
等高布局的方式
指在同一個父容器中,子元素高度相等的布局.從等高布局實現方式來說,又分為兩類
偽等高
子元素高度差依然存在,只是視覺上給人感覺就是等高.
真等高
子元素高度相等
先來看看偽等高實現方式
通過負margin和Padding實現
真等高實現方式
table
absoult
flex
grid
js
偽等高之-負margin和padding主要利用負margin來實現, 具體 負margin實現可以參考下這篇文章
left
我是中間部分的內容
我是中間部分的內容
我是中間部分的內容
我是中間部分的內容
right
11111111111
.parent{ position: relative; overflow:hidden; color: #efefef; } .center, .left, .right { box-sizing: border-box; float: left; } .center { background-color: #2ECC71; width: 60%; } .left { width: 20%; background-color: #1ABC9C; } .right { width: 20%; background-color: #3498DB; } .left, .right, .center { margin-bottom: -99999px; padding-bottom: 99999px; }真實等高之 - table布局
left
我是中間部分的內容
我是中間部分的內容
我是中間部分的內容
我是中間部分的內容
right
11111111111
.parent{ position: relative; display: table; color: #efefef; } .center, .left, .right { box-sizing: border-box; display: table-cell } .center { background-color: #2ECC71; width: 60%; } .left { width: 20%; background-color: #1ABC9C; } .right { width: 20%; background-color: #3498DB; }真實等高之 - absolute
left
我是中間部分的內容
我是中間部分的內容
我是中間部分的內容
我是中間部分的內容
right
.parent{ position: absolute; color: #efefef; width:100%; height: 200px; } .left, .right, .center { position: absolute; box-sizing: border-box; top:0; bottom:0; } .center { background-color: #2ECC71; left: 200px; right: 300px; } .left { width: 200px; background-color: #1ABC9C; } .right { right:0; width: 300px; background-color: #3498DB; }真實等高之 - flex
.parent{ display: flex; color: #efefef; width:100%; height: 200px; } .left, .right, .center { box-sizing: border-box; flex: 1; } .center { background-color: #2ECC71; } .left { background-color: #1ABC9C; } .right { background-color: #3498DB; }
真實等高之 - gridleft
我是中間部分的內容
我是中間部分的內容
我是中間部分的內容
我是中間部分的內容
right
.parent{ display: grid; color: #efefef; width:100%; height: 200px; grid-template-columns: 1fr 1fr 1fr; } .left, .right, .center { box-sizing: border-box; } .center { background-color: #2ECC71; } .left { background-color: #1ABC9C; } .right { background-color: #3498DB; }
真實等高之 - jsleft
我是中間部分的內容
我是中間部分的內容
我是中間部分的內容
我是中間部分的內容
right
獲取所有元素中最高列,然后再去比對再進行修改
left
我是中間部分的內容
我是中間部分的內容
我是中間部分的內容
我是中間部分的內容
right
.parent{ overflow: auto; color: #efefef; } .left, .right, .center { float: left; } .center { width: 60%; background-color: #2ECC71; } .left { width: 20%; background-color: #1ABC9C; } .right { width: 20%; background-color: #3498DB; }
// 獲取最高元素的高度 var nodeList = document.querySelectorAll(".parent > div"); var arr = [].slice.call(nodeList,0); var maxHeight = arr.map(function(item){ return item.offsetHeight }).sort(function(a, b){ return a - b; }).pop(); arr.map(function(item){ if(item.offsetHeight < maxHeight) { item.style.height = maxHeight + "px"; } });
日常使用過程的總結,有不足地方歡迎大家指出.
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/104330.html
摘要:等高布局的方式指在同一個父容器中子元素高度相等的布局從等高布局實現方式來說又分為兩類偽等高子元素高度差依然存在只是視覺上給人感覺就是等高真等高子元素高度相等先來看看偽等高實現方式通過負和實現真等高實現方式偽等高之負和主要利用負來實現具體負 等高布局的方式 指在同一個父容器中,子元素高度相等的布局. 從等高布局實現方式來說,又分為兩類 偽等高 子元素高度差依然存在,只是視覺上給人感覺就是...
摘要:案例圖片來自騰訊年的一道前段筆試題,有興趣的同學可以去看一下。騰訊前端面試稿布局布局指頁面布局像一張宣傳海報,以一張精美圖片作為頁面的設計中心。 寫在前面最近看到《圖解CSS3》的布局部分,結合自己以前閱讀過的一些布局方面的知識,這里進行一次基于CSS2、3的各種布局的方法總結。 常見的頁面布局 在拿到設計稿時,作為一個前端人員,我們首先會做的應該是為設計圖大致地劃分區域,然后選擇一...
摘要:案例圖片來自騰訊年的一道前段筆試題,有興趣的同學可以去看一下。騰訊前端面試稿布局布局指頁面布局像一張宣傳海報,以一張精美圖片作為頁面的設計中心。 寫在前面最近看到《圖解CSS3》的布局部分,結合自己以前閱讀過的一些布局方面的知識,這里進行一次基于CSS2、3的各種布局的方法總結。 常見的頁面布局 在拿到設計稿時,作為一個前端人員,我們首先會做的應該是為設計圖大致地劃分區域,然后選擇一...
摘要:本文概要本文將介紹如下幾種常見的布局其中實現三欄布局有多種方式,本文著重介紹圣杯布局和雙飛翼布局。借助等高布局正負可解決,下文會介紹雙飛翼布局特點同樣也是三欄布局,在圣杯布局基礎上進一步優化,解決了圣杯布局錯亂問題,實現了內容與布局的分離。 本文概要 本文將介紹如下幾種常見的布局: showImg(https://segmentfault.com/img/remote/14600000...
摘要:本文概要本文將介紹如下幾種常見的布局其中實現三欄布局有多種方式,本文著重介紹圣杯布局和雙飛翼布局。借助等高布局正負可解決,下文會介紹雙飛翼布局特點同樣也是三欄布局,在圣杯布局基礎上進一步優化,解決了圣杯布局錯亂問題,實現了內容與布局的分離。 本文概要 本文將介紹如下幾種常見的布局: showImg(https://segmentfault.com/img/remote/14600000...
閱讀 2801·2023-04-25 22:51
閱讀 2026·2021-10-11 10:58
閱讀 3308·2019-08-30 10:49
閱讀 1870·2019-08-29 17:09
閱讀 3136·2019-08-29 10:55
閱讀 839·2019-08-26 10:34
閱讀 3466·2019-08-23 17:54
閱讀 980·2019-08-23 16:06