如何實(shí)現(xiàn)兩欄布局,右側(cè)自適應(yīng)?三欄布局中間自適應(yīng)呢?
當(dāng)前位置:點(diǎn)晴教程→知識(shí)管理交流
→『 技術(shù)文檔交流 』
一、背景在日常布局中,無(wú)論是兩欄布局還是三欄布局,使用的頻率都非常高 兩欄布局兩欄布局實(shí)現(xiàn)效果就是將頁(yè)面分割成左右寬度不等的兩列,寬度較小的列設(shè)置為固定寬度,剩余寬度由另一列撐滿, 比如
這種布局適用于內(nèi)容上具有明顯主次關(guān)系的網(wǎng)頁(yè) 三欄布局三欄布局按照左中右的順序進(jìn)行排列,通常中間列最寬,左右兩列次之 大家最常見(jiàn)的就是 二、兩欄布局兩欄布局非常常見(jiàn),往往是以一個(gè)定寬欄和一個(gè)自適應(yīng)的欄并排展示存在 實(shí)現(xiàn)思路也非常的簡(jiǎn)單:
代碼如下: <style> .box{ overflow: hidden; 添加BFC } .left { float: left; width: 200px; background-color: gray; height: 400px; } .right { margin-left: 210px; background-color: lightgray; height: 200px; } </style> <div class="box"> <div class="left">左邊</div> <div class="right">右邊</div> </div> 還有一種更為簡(jiǎn)單的使用則是采取:flex彈性布局 flex彈性布局<style> .box{ display: flex; } .left { width: 100px; } .right { flex: 1; } </style> <div class="box"> <div class="left">左邊</div> <div class="right">右邊</div> </div>
注意的是, 這個(gè)屬性導(dǎo)致了列等高的效果。 為了讓兩個(gè)盒子高度自動(dòng),需要設(shè)置: 三、三欄布局實(shí)現(xiàn)三欄布局中間自適應(yīng)的布局方式有:
兩邊使用 float,中間使用 margin需要將中間的內(nèi)容放在 實(shí)現(xiàn)代碼如下: <style> .wrap { background: #eee; overflow: hidden; <!-- 生成BFC,計(jì)算高度時(shí)考慮浮動(dòng)的元素 --> padding: 20px; height: 200px; } .left { width: 200px; height: 200px; float: left; background: coral; } .right { width: 120px; height: 200px; float: right; background: lightblue; } .middle { margin-left: 220px; height: 200px; background: lightpink; margin-right: 140px; } </style> <div class="wrap"> <div class="left">左側(cè)</div> <div class="right">右側(cè)</div> <div class="middle">中間</div> </div> 原理如下:
這種實(shí)現(xiàn)方式存在缺陷:
兩邊使用 absolute,中間使用 margin基于絕對(duì)定位的三欄布局:注意絕對(duì)定位的元素脫離文檔流,相對(duì)于最近的已經(jīng)定位的祖先元素進(jìn)行定位。無(wú)需考慮HTML中結(jié)構(gòu)的順序 <style> .container { position: relative; } .left, .right, .main { height: 200px; line-height: 200px; text-align: center; } .left { position: absolute; top: 0; left: 0; width: 100px; background: green; } .right { position: absolute; top: 0; right: 0; width: 100px; background: green; } .main { margin: 0 110px; background: black; color: white; } </style> <div class="container"> <div class="left">左邊固定寬度</div> <div class="right">右邊固定寬度</div> <div class="main">中間自適應(yīng)</div> </div> 實(shí)現(xiàn)流程:
兩邊使用 float 和負(fù) margin<style> .left, .right, .main { height: 200px; line-height: 200px; text-align: center; } .main-wrapper { float: left; width: 100%; } .main { margin: 0 110px; background: black; color: white; } .left, .right { float: left; width: 100px; margin-left: -100%; background: green; } .right { margin-left: -100px; /* 同自身寬度 */ } </style> <div class="main-wrapper"> <div class="main">中間自適應(yīng)</div> </div> <div class="left">左邊固定寬度</div> <div class="right">右邊固定寬度</div> 實(shí)現(xiàn)過(guò)程:
缺點(diǎn):
使用 display: table 實(shí)現(xiàn)
<style> .container { height: 200px; line-height: 200px; text-align: center; display: table; table-layout: fixed; width: 100%; } .left, .right, .main { display: table-cell; } .left, .right { width: 100px; background: green; } .main { background: black; color: white; width: 100%; } </style> <div class="container"> <div class="left">左邊固定寬度</div> <div class="main">中間自適應(yīng)</div> <div class="right">右邊固定寬度</div> </div> 實(shí)現(xiàn)原理:
使用flex實(shí)現(xiàn)利用 代碼如下: <style type="text/css"> .wrap { display: flex; justify-content: space-between; } .left, .right, .middle { height: 100px; } .left { width: 200px; background: coral; } .right { width: 120px; background: lightblue; } .middle { background: #555; width: 100%; margin: 0 20px; } </style> <div class="wrap"> <div class="left">左側(cè)</div> <div class="middle">中間</div> <div class="right">右側(cè)</div> </div> 實(shí)現(xiàn)過(guò)程:
優(yōu)點(diǎn):
grid網(wǎng)格布局代碼如下: <style> .wrap { display: grid; width: 100%; grid-template-columns: 300px auto 300px; } .left, .right, .middle { height: 100px; } .left { background: coral; } .right { background: lightblue; } .middle { background: #555; } </style> <div class="wrap"> <div class="left">左側(cè)</div> <div class="middle">中間</div> <div class="right">右側(cè)</div> </div> 跟 轉(zhuǎn)自https://www.cnblogs.com/smileZAZ/p/18226250
該文章在 2025/10/14 15:22:07 編輯過(guò) |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... |