這次帶給大家前端開發中的多列佈局實現方法,前端開發中的多列佈局實現的注意事項有哪些,下面就是實戰案例,一起來看一下。
多列佈局
多列佈局在web前端開發中也是較為常見的,例如常見的三列、四列及以上,列的佈局使得單一的頁面可以展示更多分門別類的內容。這裡會提到的多列佈局有兩列定寬加一列自適應、多列不定寬加一列自適應、多列等分三種。
兩列定寬加一列自適應佈局
本佈局模式一共分為三列,其中兩列寬度固定,一列寬度隨內容寬度而改變。
兩列定寬加一列自適應
本案例中每一列高度為自適應,即高度和內容高度一致,左列和中列寬度為100px,右列寬度為自適應,透過float浮動佈局結合區塊級元素的特性來實現。要注意的是背景顏色可以設定在p標籤上,也可以設定在p標籤上。
多列不定寬加一列自適應
這裡講解的案例為兩列不定寬加一列自適應,高度自適應的佈局方案,
此處多列不定寬加一列自適應
首先要理解的是不定寬,不定寬指的是列的寬度可以隨時設定為其他值,這裡我們可以將左列中列的寬度設定為任意值,也不會改變佈局的模式,所以我們看到這個佈局實現程式碼和上面的是一樣的。需要注意的是不定寬與自適應的差異。
多列等分
# 多列等分佈局是在頁面中顯示多列,這多列的寬度一致,間距一致,高度自適應,
多列等分佈局簡易實作
在父容器上設定margin-left為-20px,為父容器增加20px的寬度,在column容器上設定左浮動,並為每個子容器設定寬度為父容器的25%,同時設定子容器padding-left為20px,顯示方式為border-box(此現實方式顯示的盒子模型寬高為盒子寬高)。本方案透過將父容器寬度增加一個20px(間隔寬度),將間隔顯示在子容器內部,將子容器設定為邊框盒,從而實現等分佈局。
本文只是列舉了透過float來實現多列佈局的方案,透過flex,table等也有對應的實現方案。
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
以上是前端開發中的多列佈局實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!