最近做了百度IFE的任務(wù)冯键，其中有一個(gè)任務(wù)是實(shí)現(xiàn)三欄式布局菲语，即：
三欄式布局示例.jpg
任務(wù)目標(biāo)
掌握HTML/CSS布局的概念
掌握盒模型的概念
掌握position與float的概念以及在布局時(shí)的用法
實(shí)現(xiàn)方式：
float實(shí)現(xiàn)
HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="xw_task3.css">
</head>
<body>
<div class="main">
<div class="left">
<p>團(tuán)隊(duì)名稱</p>
</div>
<div class="right">
</div>
<div class="center">
<p>關(guān)于你們團(tuán)隊(duì)的介紹</p>
<p>可以給我們介紹一下團(tuán)隊(duì)名稱的來(lái)歷妄辩，或是分別介紹你們團(tuán)隊(duì)的成員</p>
<p>(以下為實(shí)例)</p>
<p>
百度前端技術(shù)學(xué)院是一個(gè)為大學(xué)生創(chuàng)辦的免費(fèi)的前端技術(shù)實(shí)踐、分享山上、交流平臺(tái)眼耀。由百度校園招聘組、百度校園品牌部胶哲、百度前端技術(shù)部以及多個(gè)百度的前端團(tuán)隊(duì)聯(lián)合創(chuàng)辦畔塔。
</p>
<p>
今年我們將繼續(xù)保持實(shí)踐加交流的學(xué)習(xí)模式。在之前的基礎(chǔ)上鸯屿，今年引入了分學(xué)院的概念，我們非常榮幸地邀請(qǐng)到了百度商業(yè)平臺(tái)部和糯米運(yùn)營(yíng)平臺(tái)研發(fā)部以及ECharts團(tuán)隊(duì)這樣一些技
術(shù)能力較強(qiáng)的前端團(tuán)隊(duì)加入把敢，一起為大家提供實(shí)踐任務(wù)與導(dǎo)師評(píng)價(jià)寄摆。每個(gè)學(xué)院會(huì)根據(jù)自己日常在工作中的技術(shù)偏重，設(shè)置更加接地氣的技術(shù)挑戰(zhàn)修赞，讓大家可以更加實(shí)實(shí)在在地了解企業(yè)中前端研發(fā)的技術(shù)方案和學(xué)習(xí)路徑婶恼。
</p>
</div>
</div>
</body>
</html>
CSS部分
body{
width: auto;
}
.main{
padding:20px;
background-color: #eee;
border: 1px solid #999;
overflow:hidden;
}
.left{
float: left;
width: 200px;
padding: 10px;
background-color:#fff;
}
.left p{
float: right;
padding:0px 20px;
}
.right{
width: 120px;
background-color:#fff;
float: right;
}
.right img{
margin: 20px;
display: block;
}
.center{
background-color:#fff;
width:auto;
margin: 0px 140px 0px 240px;
padding: 15px;
}
position實(shí)現(xiàn)
html和前面一樣
.main{
padding:20px;
background-color: #eee;
border: 1px solid #999;
position: relative;
min-height: 485px;
}
.left{
width: 200px;
padding: 10px;
background-color:#fff;
}
.left p{
float: right;
padding:0px 20px;
}
.right{
width: 120px;
background-color:#fff;
border: 1px solid;
position: absolute;
top: 20px;
right: 20px;
}
.right img{
margin: 20px;
}
.center{
background-color:#fff;
width:auto;
margin: 0px 160px 0px 240px;
padding: 15px;
position: absolute;
top: 20px;
}
總結(jié)
這兩種方法實(shí)現(xiàn)的三欄式布局在足夠大的容器里顯示都正常桑阶。但是當(dāng)我改變?nèi)萜鞔笮r(shí)，特別是在極端情況下勾邦，實(shí)現(xiàn)效果能不能達(dá)到預(yù)期呢蚣录？答案是position不行。
- 用
position實(shí)現(xiàn)的時(shí)候眷篇，有兩個(gè)問(wèn)題萎河。
-
position布局的時(shí)候最外層的div的高度不會(huì)自適應(yīng)等于子元素最高高度，因?yàn)?code>absolute絕對(duì)定位會(huì)把元素徹底從文檔流中拿出來(lái)（脫離文檔流）蕉饼，再相對(duì)其他元素定位虐杯。
脫離文檔流.PNG
所以必須要給父元素設(shè)置高度（min-height）。 調(diào)整瀏覽器寬度到一種極端（寬度最忻粮邸）情況時(shí)擎椰，會(huì)出現(xiàn)內(nèi)容溢出。
position改變?yōu)g覽器寬度.PNG
position：absolute布局一般是在能確定子元素（內(nèi)容）高度不會(huì)超出的時(shí)候创肥。
- 我們?cè)賮?lái)看看float改變?yōu)g覽器窗口大小時(shí)的實(shí)現(xiàn)效果：
float實(shí)現(xiàn)效果.jpg
float實(shí)現(xiàn).jpg
float在極端情況基本達(dá)到預(yù)期效果达舒。不過(guò)此時(shí)這個(gè)頁(yè)面的呈現(xiàn)看起來(lái)還是有點(diǎn)不美觀（中間的div自適應(yīng)太窄）。這就需要設(shè)計(jì)師提供一個(gè)在極窄情況下頁(yè)面的排列方式叹侄，我們?cè)俑鶕?jù)需求更改代碼巩搏。
