国产麻豆一区二区精彩视频-国产麻豆一区精品视频-国产麻豆一区在线-国产毛a片久久久久无码-国产毛片av一区二区三区网站-国产毛片精品av一区二区

左右定寬，中間自適應(yīng)，實(shí)現(xiàn)三列布局

今天想說的是一個(gè)左右定寬，中間自適應(yīng)，實(shí)現(xiàn)三列布局，我也總結(jié)了以下，主要有以下幾種：
廢話不多說，直接上代碼：

第一種：float

<!--html--> 
<div id="left"><span>left</span></div> 
<div id="right"><span>right</span></div> 
<div id="middle"><span>middle</span></div>

//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

<!--html--> 
<div id="left"><span>left</span></div> 
<div id="right"><span>right</span></div> 
<div id="middle"><span>middle</span></div>

//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; 
}

第三種：雙飛翼布局

<!--html--> 
<div class="grid"> 
    <div id="middle"> 
        <div id="middle-span"><span>middle</span></div> 
    </div> 
    <div id="left"><span>left</span></div> 
    <div id="right"><span>right</span></div> 
</div>

//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

<!--html--> 
<div class="flex"> 
    <div id="left"><span>left</span></div> 
    <div id="middle"><span>middle</span></div> 
    <div id="right"><span>right</span></div> 
</div>

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

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

        #middle { 
            background-color: #fff9ca; 
            flex: 1; /* flex中寬度自適應(yīng)使用該屬性，使用100%時(shí)其他列的固定寬度會(huì)出現(xiàn)問題*/ 
            height: 50px; 
        } 

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