溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“CSS三欄布局怎么實現”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“CSS三欄布局怎么實現”這篇文章吧。
實現原理：
中間一欄是自適應的，如果我們將這三個部分都設置為左浮動，那么 left 和 right 就會被擠在下一行，所以我們需要解決這個問題。我們我們將 left 與 right 的 margin-left 都設置為負值，設置父元素的 padding-left 與 padding-right，為左右兩欄騰出空間。最后需要設置將 left 與 right 設置想對定位，并設置他們的 left 與 right 屬性。
具體代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS實現三欄布局 - 億速云(yisu.com)</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三欄布局怎么實現”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
