為了按照常規(guī)WEB布局,這里全部采用擁有header和footer模式進行左中右布局編寫。
實現(xiàn)思路
常規(guī)思路,使左右兩個Aside分別浮動至左右兩側(cè)即可
代碼實現(xiàn)
<!-- HTML部分 --> <div class="container"> <!-- 頂部Header --> <header>這里是頭部</header> <!-- 中間aside及content --> <div class="middle clearfix"> <aside class="left"></aside> <aside class="right"></aside> <!-- 中間content顯示內(nèi)容 為了防止將右側(cè)擠下去故放置在右側(cè)欄下方 --> <div class="content">這里是內(nèi)容</div> </div> <!-- 底部Footer --> <footer></footer> </div> <!-- CSS部分 --> <style lang="scss"> * { margin: 0; padding: 0; } .clearfix { zoom: 1; &::after { display: block; content: ' '; clear:both } } html, body { width: 100%; height: 100% } .container { width: 100% height: 100% header { height: 80px; background: rgba(0, 0, 0, 0.5) } footer { height: 80px; background: rgba(0, 0, 0, 0.5) } .middle { height: calc(100% - 80px - 80px) aside { height: 100%; width: 300px; background: rgba(156, 154, 249, 1) } .left { float: left } .right: { float: right } } } } </style>
實現(xiàn)效果
實現(xiàn)思路
為中間三欄父級賦予position: relative,賦予左右Aside position: absolute,并且分別賦予left: 0 right: 0 width:自定義值,賦予中間content left,right 分別等于左右width即可
代碼實現(xiàn)
<!-- HTML相關(guān)代碼 --> <div class="container"> <!-- 頂部Header --> <header></header> <div class="middle"> <!-- 左側(cè)Aside --> <aside class="left"></aside> <!-- 中間content內(nèi)容 --> <div class="content">這里是內(nèi)容</div> <!-- 右側(cè)Aside --> <aside class="right"></aside> </div> <!-- 底部Footer --> <footer></footer> </div> <!-- CSS相關(guān)代碼 --> <style lang="scss"> * { margin: 0; padding: 0 } html, body { width: 100%; height: 100% } .container { width: 100%; height: 100%; header { height: 80px; background: rgba(0, 0, 0, 0.5); } footer { height: 80px; background: rgba(0, 0, 0, 0.5); } .middle { height: calc(100% - 80px - 80px); position: relative; aside, .content { position: absolute; } .left { width: 300px; background: rgba(156, 154, 249, 1); left: 0; height: 100%; } .right { width: 300px; background: rgba(156, 154, 249, 1); right: 0; height: 100%; } .content { left: 300px; right: 300px; } } } </style>
實現(xiàn)效果
實現(xiàn)思路
賦予左中右三列父級display: flex,賦予左右Aside width自定義,賦予中間content flex:1即可
代碼實現(xiàn)
<!-- HTML相關(guān)代碼 --> <div class="container"> <!-- 頂部Header --> <header></header> <div class="middle"> <!-- 左側(cè)Aside --> <aside class="left"></aside> <!-- 中間content內(nèi)容 --> <div class="content">這里是內(nèi)容</div> <!-- 右側(cè)Aside --> <aside class="right"></aside> </div> <!-- 底部Footer --> <footer></footer> </div> <!-- CSS部分 --> <style lang="scss"> * { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; } .container { header { height: 80px; background: rgba(0, 0, 0, 0.5); } footer { height: 80px; background: rgba(0, 0, 0, 0.5); } .middle { display: flex; height: calc(100% - 80px - 80px); aside { width: 300px; background: rgba(156, 154, 249, 1); } .content: { flex: 1; } } } </style>
實現(xiàn)效果
實現(xiàn)思路
賦予左中右三列父級display: table, width: 100%,分別賦予左中右三列display: table-cell,分別賦予左右Aside width即可。
代碼實現(xiàn)
<!-- HTML相關(guān)代碼 --> <div class="container"> <!-- 頂部Header --> <header></header> <div class="middle"> <!-- 左側(cè)Aside --> <aside class="left"></aside> <!-- 中間content內(nèi)容 --> <div class="content">這里是內(nèi)容</div> <!-- 右側(cè)Aside --> <aside class="right"></aside> </div> <!-- 底部Footer --> <footer></footer> </div> <!-- CSS部分 --> <style lang="scss"> * { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; } .container { header { height: 80px; background: rgba(0, 0, 0, 0.5); } footer { height: 80px; background: rgba(0, 0, 0, 0.5); } .middle { display: table; width: 100% height: calc(100% - 80px - 80px); aside { width: 300px; display: table-cell; background: rgba(156, 154, 249, 1); } .content: { display: table-cell; } } } </style>
實現(xiàn)效果
實現(xiàn)思路
賦予左中右三列父級display: grid,并且使用grid-template-columns: 300px auto 300px,將其分為寬為300px、auto、300px三列布局即可。
代碼實現(xiàn)
<!-- HTML相關(guān)代碼 --> <div class="container"> <!-- 頂部Header --> <header></header> <div class="middle"> <!-- 左側(cè)Aside --> <aside class="left"></aside> <!-- 中間content內(nèi)容 --> <div class="content">這里是內(nèi)容</div> <!-- 右側(cè)Aside --> <aside class="right"></aside> </div> <!-- 底部Footer --> <footer></footer> </div> <!-- CSS部分 --> <style lang="scss"> * { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; } .container { header { height: 80px; background: rgba(0, 0, 0, 0.5); } footer { height: 80px; background: rgba(0, 0, 0, 0.5); } .middle { display: grid; grid-template-columns: 300px auto 300px; height: calc(100% - 80px - 80px); aside { background: rgba(156, 154, 249, 1); } } } </style>
實現(xiàn)效果
到此這篇關(guān)于詳解CSS多種三列自適應(yīng)布局實現(xiàn)的文章就介紹到這了,更多相關(guān)CSS 三列自適應(yīng)布局內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
標簽:林芝 大同 赤峰 萍鄉(xiāng) 延邊 泰州 保定
巨人網(wǎng)絡(luò)通訊聲明:本文標題《詳解CSS多種三列自適應(yīng)布局實現(xiàn)》,本文關(guān)鍵詞 ;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請?zhí)峁┫嚓P(guān)信息告之我們,我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。