如何實(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)文章
正在查詢... 
|
400 186 1886
