溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關DIV+CSS如何實現三列布局，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
1、寬度自適應三列布局
三列布局的原理和兩列布局的原理是一樣的，只不過多了一列，只需給寬度自適應兩列布局中間再加一列，然后重新計算三列的寬度，就實現了寬度自適應的三列布局。
同樣的道理，更多列的布局，其實和兩列、三列的布局模式是一樣的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三列布局</title>
<style>
*{margin:0;padding:0;}
#herder{
height:50px;
background:blue;
}
#main{
width:100%;
overflow:hidden;
}
#main .main-left{
width:25%;
height:800px;
background:red;
float:left;
}
#main .main-center{
width:50%;
height:800px;
background:lightgreen;
float:left;
}
#main .main-right{
width:25%;
height:800px;
background:pink;
float:right;
}
#footer{
height:50px;
background:gray;
}
</style>
</head>
<body>
<div id="herder">頁頭</div>
<div id="main">
<div class="main-left">左列</div>
<div class="main-center">中間</div>
<div class="main-right">右列</div>
</div>
<div id="footer">頁腳</div>
</body>
</html>2、左右兩列固定寬度，中間內容寬度自適應
要想實現左右兩列固定寬度，中間寬度自適應的布局，那么使用浮動就做不到了，使用浮動之后頁面就亂了，必須使用絕對定位來將三列固定在一行。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>兩邊固定中間自適應布局</title>
<style>
*{margin:0;padding:0;}
#herder{
height:50px;
background:blue;
}
#main{
width:100%;
position:relative;
}
#main .main-left{
width:200px;
height:800px;
background:red;
position:absolute;
left:0;
top:0;
}
#main .main-center{
height:800px;
background:lightgreen;
margin:0 310px 0 210px;
}
#main .main-right{
width:300px;
height:800px;
background:pink;
position:absolute;
right:0;
top:0;
}
#footer{
height:50px;
background:gray;
}
</style>
</head>
<body>
<div id="herder">頁頭</div>
<div id="main">
<div class="main-left">左列</div>
<div class="main-center">設計網頁的第一步就是設計版面布局，搭建網站結構，網頁排版的合理性，在一定程度上也影響著網站整體的布局以及后期的優化。一個好的網站形象能更容易地吸引用戶、留住用戶。因此，網站首頁第一屏的排版非常重要，很多時候能決定用戶的去與留。</div>
<div class="main-right">右列</div>
</div>
<div id="footer">頁腳</div>
</body>
</html>關于“DIV+CSS如何實現三列布局”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
