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

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

成都創(chuàng)新互聯(lián)公司網(wǎng)站建設(shè)公司是一家服務(wù)多年做網(wǎng)站建設(shè)策劃設(shè)計制作的公司,為廣大用戶提供了做網(wǎng)站、網(wǎng)站建設(shè)，成都網(wǎng)站設(shè)計，廣告投放平臺，成都做網(wǎng)站選成都創(chuàng)新互聯(lián)公司，貼合企業(yè)需求，高性價比，滿足客戶不同層次的需求一站式服務(wù)歡迎致電。

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

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

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

<!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)

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

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

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

網(wǎng)站名稱：DIV+CSS如何實現(xiàn)三列布局
分享URL：http://chinadenli.net/article22/jpsojc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、網(wǎng)站改版、做網(wǎng)站、域名注冊、品牌網(wǎng)站建設(shè)、電子商務(wù)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

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