web前端開發(fā)中常見的多列布局解決方案整理(一定要看)
多列布局
多列布局在web前端開發(fā)中也是較為常見的，比如常見的三列、四列及以上，列的布局使得單一的頁(yè)面可以展示更多分門別類的內(nèi)容。這里會(huì)提到的多列布局有兩列定寬加一列自適應(yīng)、多列不定寬加一列自適應(yīng)、多列等分三種。
兩列定寬加一列自適應(yīng)布局
本布局模式一共分為三列，其中兩列寬度固定，一列寬度隨內(nèi)容寬度而改變。簡(jiǎn)易實(shí)現(xiàn)代碼如下：
兩列定寬加一列自適應(yīng)
本案例中每一列高度為自適應(yīng)，即高度和內(nèi)容高度一致，左列和中列寬度為100px，右列寬度為自適應(yīng)，通過float浮動(dòng)布局結(jié)合塊級(jí)元素的特性來實(shí)現(xiàn)。需要注意的是背景顏色可以設(shè)置在p標(biāo)簽上，也可以設(shè)置在div標(biāo)簽上。
多列不定寬加一列自適應(yīng)
這里講解的案例為兩列不定寬加一列自適應(yīng)，高度自適應(yīng)的布局方案，簡(jiǎn)易實(shí)現(xiàn)代碼如下：
此處多列不定寬加一列自適應(yīng)
首先要理解的是不定寬，不定寬指的是列的寬度可以隨時(shí)設(shè)定為其他值，這里我們可以將左列中列的寬度設(shè)置為任意值，也不會(huì)改變布局的模式，所以我們看到這個(gè)布局實(shí)現(xiàn)代碼和上面的是一樣的。需要注意的是不定寬與自適應(yīng)的區(qū)別。
多列等分
多列等分布局是在頁(yè)面中顯示多列，這多列的寬度一致，間距一致，高度自適應(yīng)，簡(jiǎn)易實(shí)現(xiàn)代碼如下：
多列等分布局簡(jiǎn)易實(shí)現(xiàn)
在父容器上設(shè)置margin-left為-20px，為父容器增加20px的寬度，在column容器上設(shè)置左浮動(dòng)，并為每一個(gè)子容器設(shè)置寬度為父容器的25%，同時(shí)設(shè)置子容器padding-left為20px，顯示方式為border-box（該現(xiàn)實(shí)方式顯示的盒模型寬高為盒子寬高）。本方案通過將父容器寬度增加一個(gè)20px（間隔寬度），將間隔顯示在子容器內(nèi)部，將子容器設(shè)置為邊框盒，從而實(shí)現(xiàn)等分布局。
本文只是列舉了通過float來實(shí)現(xiàn)多列布局的方案，通過flex，table等也有相應(yīng)的實(shí)現(xiàn)方案。
總結(jié)
以上所述是小編給大家介紹的web前端開發(fā)中常見的多列布局解決方案整理，希望對(duì)大家有所幫助！
相關(guān)文章
JavaScript實(shí)現(xiàn)圖片偽異步上傳過程解析
這篇文章主要介紹了javascript實(shí)現(xiàn)圖片偽異步上傳過程解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-04-04
JS中style.display和style.visibility的區(qū)別實(shí)例說明
下面的例子說明了這種區(qū)別：在這個(gè)例子中，divContent1和divContent2隱藏的時(shí)候用的是style.display=none，這時(shí)候，后面的div會(huì)向上移動(dòng)，占據(jù)已經(jīng)隱藏的div的空間。divContent3和divContent4用的是style.visibility=hidden來隱藏，但是其隱藏后仍然占據(jù)原來的空間2013-03-03
這篇文章主要介紹的是通過js簡(jiǎn)單實(shí)現(xiàn)交換Li的值,需要的朋友可以參考下2014-05-05
常見的JavaScript內(nèi)存錯(cuò)誤及解決方法
這篇文章主要介紹了常見的JavaScript內(nèi)存錯(cuò)誤,JavaScript?不提供任何內(nèi)存管理操作。相反，內(nèi)存由?JavaScript?VM?通過內(nèi)存回收過程管理，該過程稱為垃圾收集。下面我們就來看看下面文章對(duì)JavaScript內(nèi)存錯(cuò)誤的各種舉例說明吧2021-12-12
用JS提交參數(shù)創(chuàng)建form表單在FireFox中遇到的問題
在一個(gè)前端頁(yè)面上，需要通過JavaScript來提交參數(shù)，使用JS創(chuàng)建form表單，將參數(shù)append到表單中進(jìn)行提交,接下來將介紹如何操作與實(shí)現(xiàn)2013-01-01
JavaScript解析任意形式的json樹型結(jié)構(gòu)展示
這篇文章主要介紹了JavaScript解析任意形式的json樹型結(jié)構(gòu)展示的相關(guān)資料,需要的朋友可以參考下2017-07-07
其實(shí)空格有兩個(gè)，一個(gè)ASCII編號(hào)是32，另一個(gè)是ASCII編號(hào)是160.后者是unicode編碼。以前寫一個(gè)貼子ie6下準(zhǔn)確判斷空格還以是IE6不能正確判斷空格。2009-11-11
朋友公司開發(fā)的在線JS加密站點(diǎn)，內(nèi)測(cè)中，自己試過不能找到加密后的源代碼，不知道還有那位大大能夠破解2008-11-11
array.prototype.silce.call 理解分析
在很多框架中與遇到這個(gè)方法，但一時(shí)沒去研究這個(gè)方法，只要前段時(shí)間被問到，尷尬無奈收?qǐng)?。所以學(xué)習(xí)就要追根究底的精神，廢話少說，說正題。2010-04-04
JS實(shí)現(xiàn)線性表的鏈?zhǔn)奖硎痉椒ㄊ纠窘?jīng)典數(shù)據(jù)結(jié)構(gòu)】
這篇文章主要介紹了JS實(shí)現(xiàn)線性表的鏈?zhǔn)奖硎痉椒?簡(jiǎn)單講解了線性表鏈?zhǔn)奖硎镜脑聿⒔Y(jié)合實(shí)例形式分析了js針對(duì)線性表鏈?zhǔn)奖硎镜膭?chuàng)建、插入、刪除等節(jié)點(diǎn)操作技巧,需要的朋友可以參考下2017-04-04