網(wǎng)頁(yè)三列布局是開發(fā)中較為常見的布局方式之一，那么這篇文章中 w3cschool 小編來為大家介紹下 CSS 三欄布局如何實(shí)現(xiàn)。
相關(guān)文章：《CSS的雙列自適應(yīng)布局如何實(shí)現(xiàn)？附源碼》、《CSS的單列布局如何實(shí)現(xiàn)？附源碼》
三欄布局是指在網(wǎng)頁(yè)的兩側(cè)欄目固定寬度，而中間部分自適應(yīng)寬度。我們來看下實(shí)現(xiàn)效果：
實(shí)現(xiàn)原理：
中間一欄是自適應(yīng)的，如果我們將這三個(gè)部分都設(shè)置為左浮動(dòng)，那么 left 和 right 就會(huì)被擠在下一行，所以我們需要解決這個(gè)問題。我們我們將 left 與 right 的 margin-left 都設(shè)置為負(fù)值，設(shè)置父元素的 padding-left 與 padding-right，為左右兩欄騰出空間。最后需要設(shè)置將 left 與 right 設(shè)置想對(duì)定位，并設(shè)置他們的 left 與 right 屬性。
具體代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS實(shí)現(xiàn)三欄布局 - 編程獅(w3cschool.cn)</title>
<style type="text/css">
#main{
padding-left: 220px;
padding-right: 220px;
}
#left{
float: left;
width: 200px;
height: 300px;
background-color: pink;
margin-left: -100%;
position: relative;
left: -220px;
}
#center{
float: left;
width: 100%;
height: 300px;
background-color: red;
}
#right{
float: left;
width: 200px;
height: 300px;
background-color: yellow;
margin-left: -200px;
position: relative;
right: -220px;
}
</style>
</head>
<body>
<div id="main">
<div id="center"></div>
<div id="left"></div>
<div id="right"></div>
</div>
</body>
</html>以上就是文章“CSS 三欄布局如何實(shí)現(xiàn)？附源碼”的全部?jī)?nèi)容。想要了解更多 CSS 布局，請(qǐng)前往 w3cschool。
