溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

DIV+CSS如何實(shí)現(xiàn)三列布局

發(fā)布時(shí)間：2021-09-14 14:45:39 來源：億速云 閱讀：293 作者：小新 欄目：web開發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)DIV+CSS如何實(shí)現(xiàn)三列布局，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

1、寬度自適應(yīng)三列布局

　　三列布局的原理和兩列布局的原理是一樣的，只不過多了一列，只需給寬度自適應(yīng)兩列布局中間再加一列，然后重新計(jì)算三列的寬度，就實(shí)現(xiàn)了寬度自適應(yīng)的三列布局。

　　同樣的道理，更多列的布局，其實(shí)和兩列、三列的布局模式是一樣的。

<!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、左右兩列固定寬度，中間內(nèi)容寬度自適應(yīng)

　　要想實(shí)現(xiàn)左右兩列固定寬度，中間寬度自適應(yīng)的布局，那么使用浮動(dòng)就做不到了，使用浮動(dòng)之后頁面就亂了，必須使用絕對(duì)定位來將三列固定在一行。

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <title>兩邊固定中間自適應(yīng)布局</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">設(shè)計(jì)網(wǎng)頁的第一步就是設(shè)計(jì)版面布局，搭建網(wǎng)站結(jié)構(gòu)，網(wǎng)頁排版的合理性，在一定程度上也影響著網(wǎng)站整體的布局以及后期的優(yōu)化。一個(gè)好的網(wǎng)站形象能更容易地吸引用戶、留住用戶。因此，網(wǎng)站首頁第一屏的排版非常重要，很多時(shí)候能決定用戶的去與留。</div>  
    <div class="main-right">右列</div>  
</div>  
<div id="footer">頁腳</div>  
</body>  
</html>

關(guān)于“DIV+CSS如何實(shí)現(xiàn)三列布局”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手