首頁 > web前端 > js教程 > 主體

前端開發中的多列佈局實作方法

php中世界最好的语言
發布: 2018-04-17 14:37:59
原創
2333 人瀏覽過

這次帶給大家前端開發中的多列佈局實現方法,前端開發中的多列佈局實現的注意事項有哪些,下面就是實戰案例,一起來看一下。

多列佈局

多列佈局在web前端開發中也是較為常見的,例如常見的三列、四列及以上,列的佈局使得單一的頁面可以展示更多分門別類的內容。這裡會提到的多列佈局有兩列定寬加一列自適應、多列不定寬加一列自適應、多列等分三種。

兩列定寬加一列自適應佈局

本佈局模式一共分為三列,其中兩列寬度固定,一列寬度隨內容寬度而改變。

兩列定寬加一列自適應

本案例中每一列高度為自適應,即高度和內容高度一致,左列和中列寬度為100px,右列寬度為自適應,透過float浮動佈局結合區塊級元素的特性來實現。要注意的是背景顏色可以設定在p標籤上,也可以設定在p標籤上。

多列不定寬加一列自適應

這裡講解的案例為兩列不定寬加一列自適應,高度自適應的佈局方案,

此處多列不定寬加一列自適應

首先要理解的是不定寬,不定寬指的是列的寬度可以隨時設定為其他值,這裡我們可以將左列中列的寬度設定為任意值,也不會改變佈局的模式,所以我們看到這個佈局實現程式碼和上面的是一樣的。需要注意的是不定寬與自適應的差異。

多列等分

# 多列等分佈局是在頁面中顯示多列,這多列的寬度一致,間距一致,高度自適應,

多列等分佈局簡易實作

在父容器上設定margin-left為-20px,為父容器增加20px的寬度,在column容器上設定左浮動,並為每個子容器設定寬度為父容器的25%,同時設定子容器padding-left為20px,顯示方式為border-box(此現實方式顯示的盒子模型寬高為盒子寬高)。本方案透過將父容器寬度增加一個20px(間隔寬度),將間隔顯示在子容器內部,將子容器設定為邊框盒,從而實現等分佈局。

本文只是列舉了透過float來實現多列佈局的方案,透過flex,table等也有對應的實現方案。

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:



#

以上是前端開發中的多列佈局實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板