左右定寬，中間自適應，實現三列布局

左右定寬，中間自適應，實現三列布局

今天想說的是一個左右定寬，中間自適應，實現三列布局，我也總結了以下，主要有以下幾種：
廢話不多說，直接上代碼：

第一種：float

 
left
 
right
 
middle

//css 
#left{ 
    float: left; 
    background-color: red; 
    width: 150px; 
    height: 50px; 
} 
#right { 
    float: right; 
    background-color: yellow; 
    width: 200px; 
    height: 50px; 
} 
#middle { 
    margin: 0 200px 0 150px; 
    width: 100%; 
    background-color: #fff9ca; 
    height: 50px; 
}

第二種：BFC

 
left
 
right
 
middle

//css 
#left { 
    background-color: red; 
    width: 150px; 
    height: 50px; 
    float: left; 
} 
#right { 
    background-color: yellow; 
    width: 200px; 
    height: 50px; 
    float: right; 
} 
#middle { 
    background-color: #fff9ca; 
    height: 50px; 
    overflow: hidden; 
}

第三種：雙飛翼布局

 
 
    
 
        
middle
 
    
 
    
left
 
    
right
 

//css 
#middle { 
    float: left; 
    background-color: #fff9ca; 
    width: 100%; 
    height: 50px; 
} 

#middle-span { 
    margin: 0 200px 0 150px; 
} 

#left { 
    float: left; 
    position: relative; 
    background-color: red; 
    width: 150px; 
    margin-left: -100%; 
    height: 50px; 

} 

#right { 
    float: left; 
    position: relative; 
    background-color: yellow; 
    width: 200px; 
    margin-left: -200px; 
    height: 50px; 
}

第四種：flex

 
 
    
left
 
    
middle
 
    
right
 

//css 
        .flex { 
            display: flex; 
            flex-flow: row; 
        } 

        #left { 
            background-color: red; 
            width: 150px; 
            height: 50px; 
        } 

        #middle { 
            background-color: #fff9ca; 
            flex: 1; /* flex中寬度自適應使用該屬性，使用100%時其他列的固定寬度會出現問題*/ 
            height: 50px; 
        } 

        #right { 
            background-color: yellow; 
            width: 200px; 
            height: 50px; 
        }

文章標題：左右定寬，中間自適應，實現三列布局
文章分享：http://m.kartarina.com/news/160835.html

成都網站建設公司_創新互聯，為您提供網站改版、云服務器、服務器托管、全網營銷推廣、定制開發、定制網站

廣告

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