CSS實戰筆記 十一 自適應三欄布局

2022-07-19 05:21:16 字數 1262 閱讀 7979

自適應三欄布局是常見的布局之一，一般實現為兩邊定寬而中間自適應

hello world


thank you


say hello to tomorrow


say goodbye to yesterday


.wrap 


.left 


.right 


.center
hello world


say hello to tomorrow


say goodbye to yesterday


thank you


.wrap 


.left 


.center 


.right
hello world


say hello to tomorrow


say goodbye to yesterday


thank you


.wrap 


.left 


.center 


.right
聖杯布局和雙飛翼布局都是典型的自適應三欄布局，而且它們要求中間欄必須放在 dom 結構的最前面優先渲染

（1）聖杯布局

say hello to tomorrow

say goodbye to yesterday

hello world

thank you

* 


/* 4、給容器設定內邊距，為左右兩欄預留位置 */


padding-left: 220px;


padding-right: 220px; 


}.center 


.left 


.right
（2）雙飛翼布局

say goodbye to yesterday

hello world

thank you

* 


.center 


/* 1、三欄同時設定左浮動，此時它們處於同一行 */


float: left;


/* 2、中間欄設定寬度自適應，此時左右兩欄被擠到下一行 */


width: 100%;


}.left 


.right
【 閱讀更多 css 系列文章，請看 css學習筆記 】

CSS實戰筆記 十 自適應雙欄布局

自適應雙欄布局是常見的布局之一，頁面上有兩列內容，一欄由內容撐開，另一欄自動撐滿剩餘寬度 hello world good night say hello to tomorrow say goodbye to yesterday wrap left righthello world good nig...

三欄布局 自適應

趴趴熊，我們走 個人簡介，是當事人全面而簡潔地介紹自身情況的一種書面表達方式。求職過程中撰寫的個人簡介是求職者向欲供職單位全面 簡潔 條理清晰地自我介紹 自我推薦的文書。簡介是應用寫作學研究的一種日常應用文體。p 個人簡介，是當事人全面而簡潔地介紹自身情況的一種書面表達方式。求職過程中撰寫的個人簡介...

三欄自適應布局

實現左中右三欄布局，左右為固定寬度，中間寬度隨父元素寬度變化 父元素設定display flex 左右盒子寬度固定，中間盒子設定flex 1 container left center right style class container class left div class center d...