多列布局

多列布局在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標簽上，也可以設(shè)置在div標簽上。

多列不定寬加一列自適應(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ā)中常見的多列布局解決方案整理，希望對大家有所幫助！

最新評論