最近做了百度IFE的任务，其中有一个任务是实现三栏式布局，即：
三栏式布局示例.jpg
任务目标
掌握HTML/CSS布局的概念
掌握盒模型的概念
掌握position与float的概念以及在布局时的用法
实现方式：
float实现
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>团队名称</p>
</div>
<div class="right">
</div>
<div class="center">
<p>关于你们团队的介绍</p>
<p>可以给我们介绍一下团队名称的来历，或是分别介绍你们团队的成员</p>
<p>(以下为实例)</p>
<p>
百度前端技术学院是一个为大学生创办的免费的前端技术实践、分享、交流平台。由百度校园招聘组、百度校园品牌部、百度前端技术部以及多个百度的前端团队联合创办。
</p>
<p>
今年我们将继续保持实践加交流的学习模式。在之前的基础上，今年引入了分学院的概念，我们非常荣幸地邀请到了百度商业平台部和糯米运营平台研发部以及ECharts团队这样一些技
术能力较强的前端团队加入，一起为大家提供实践任务与导师评价。每个学院会根据自己日常在工作中的技术偏重，设置更加接地气的技术挑战，让大家可以更加实实在在地了解企业中前端研发的技术方案和学习路径。
</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实现
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;
}
总结
这两种方法实现的三栏式布局在足够大的容器里显示都正常。但是当我改变容器大小时，特别是在极端情况下，实现效果能不能达到预期呢？答案是position不行。
- 用
position实现的时候，有两个问题。
-
position布局的时候最外层的div的高度不会自适应等于子元素最高高度，因为
absolute绝对定位会把元素彻底从文档流中拿出来（脱离文档流），再相对其他元素定位。
脱离文档流.PNG
所以必须要给父元素设置高度（min-height）。 -
调整浏览器宽度到一种极端（宽度最小）情况时，会出现内容溢出。
position改变浏览器宽度.PNG
综上所述：用position：absolute布局一般是在能确定子元素（内容）高度不会超出的时候。
- 我们再来看看float改变浏览器窗口大小时的实现效果：
float实现效果.jpg
float实现.jpg
float在极端情况基本达到预期效果。不过此时这个页面的呈现看起来还是有点不美观（中间的div自适应太窄）。这就需要设计师提供一个在极窄情况下页面的排列方式，我们再根据需求更改代码。
网友评论