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