99资源 在线视频|美女人妻自慰淫叫|日韩欧美乱伦电影|超碰按摩国产超碰|av全球免费不卡|加勒比无码一区人妻|国产高清一区视频高清|一区二区三区精品伊人|无码加勒比人妻高清|久草中文在线一区蜜乳

三列自適應(yīng)布局

2016/11/11 8:50:09   閱讀：1789    發(fā)布者：1789

分析了兩列自適應(yīng)布局的實(shí)現(xiàn)思路后，會(huì)覺(jué)得三列自適應(yīng)布局的實(shí)現(xiàn)原理其實(shí)和他一模一樣，
不過(guò)是多了一個(gè)盒子而已。

第一類，浮動(dòng)在前：

<div class="left"></div> 
<div class="right"></div> 
<div class="main"></div>

方法一：float+margin

.main { 
    margin-left: 150px; 
    margin-right: 100px; 
} 
.left { 
    float: left; 
    width: 150px; 
} 
.right { 
    float: right; 
    width: 100px; 
}

方法二：float+BFC

.main { 
    overflow: hidden; 
} 
.left { 
    float: left; 
    width: 150px; 
} 
.right { 
    float: right; 
    width: 100px; 
}

 

第二類，主要內(nèi)容在前：

方法三：float+負(fù)邊距+relative

<div class="main"></div> 
<div class="left"></div> 
<div class="right"></div>

這里和兩列布局有些不同，在兩列布局中，.main只需要右移給.left空出位置就可以了，
所以給他一個(gè)margin-left就能解決。而在三列布局中，他不僅需要給.left騰出空間，還要給.
right騰出空間，此時(shí)margin已經(jīng)無(wú)能為力了，所以需要他們?nèi)齻€(gè)外面的盒子來(lái)做這件事情：

body { 
    padding-left: 150px; 
    padding-right: 100px; 
}

這樣子就會(huì)產(chǎn)生一個(gè)問(wèn)題，給body添加了padding之后，.main的寬度就減小了，這就意味著
.left的margin-left值也會(huì)減小，于是，當(dāng).main的寬度減小到小于.left的寬度時(shí)，
.left的負(fù)邊距已經(jīng)不能為他創(chuàng)造足夠的空間到上面一行了，他就會(huì)被擠下去。所以，
為了避免這個(gè)問(wèn)題，需要給包裹盒子設(shè)置一個(gè)最小寬度，當(dāng)屏幕寬度小于這個(gè)值時(shí)，他將不再收縮。

.main { 
    float: left; 
    width: 100%; 
} 
.left { 
    float: left; 
    position: relative; 
    left: -150px; 
    margin-left: -100%; 
    width: 150px; 
} 
.right { 
    float: left; 
    position: relative; 
    right: -100px; 
    margin-left: -100px; 
    width: 100px; 
} 
body { min-width: 150px; 
    padding-left: 150px; 
    padding-right: 100px; 
}

 

方法四：float+負(fù)邊距+新盒子

<div class="main"> 
    <div class="main-content"></div> 
</div> 
<div class="left"></div> 
<div class="right"></div>

這時(shí)的問(wèn)題是，當(dāng)屏幕寬度小于.left和.right寬度之和時(shí)，.main-content即中間那列
已經(jīng)完全被擠沒(méi)了，所以，同樣需要給他們外面的盒子設(shè)置一個(gè)最小寬度：

.main { 
    float: left; 
    width: 100%; 
} 
.left { 
    margin-left: -100%; 
    float: left; 
    width: 150px; 
} 
.right { 
    margin-left: -100px; 
    float: left; 
    width: 100px; 
} 
.main-content { 
    margin-left: 150px; 
    margin-right: 100px; 
} 
body { 
    min-width:500px; 
}

 

方法五：flexbox

<div class="container"> 
    <div class="main"></div> 
    <div class="left"></div> 
    <div class="right"></div> 
</div>
.container { 
    min-width: 500px; 
    display: flex; 
} 
.main { 
    margin: 0 10px; 
    order: 1; 
    flex: 1; 
} 
.left { 
    width: 150px; 
} 
.right { 
    order:2; 
    width: 100px; 
}

 

【 微信掃一掃 】

文章分類

相關(guān)新聞

熱門(mén)標(biāo)簽