百度前端学院任务三——三栏式布局（中间宽度自适应）

前言：最近在写百度前端学院的题目，打算这个星期快速得把第一阶段的任务过一遍。三栏式布局可以有两种写法，用float或者用position

方法一：使用float属性

<div id="content">
    <div class="left"></div>
    <div class="right"></div>
    <div class="middle"></div>
</div>

注意：middle块必须放在最后。

.left{
    float:left;
    background-color: white;
    width: 160px;
    padding: 20px;
    background: white;
.right{
    float:right;
    width: 80px;
    padding: 20px;
    background: white;
}
.middle{
    margin: 0 160px 0 240px;
    background: white;
    padding:20px;
}

样式设置的关键点：
①整个大的div不设置宽度；
②两边分别设置左右浮动，设置固定宽度；
③中间的div设置margin-right和margin-left（计算好）

方法二使用position属性

<div id="content">
    <div class="left"></div>
    <div class="right"></div>
    <div class="middle"></div>
</div>

注：这种方法div摆放的顺序就无所谓了。

#content{
    position: relative;
    background-color: #eee;
    border:1px solid #999;
    padding: 20px;
    /**/
    min-height: 600px;
}
.left{
    width: 160px;
    position: absolute;
    left: 20px;
    padding: 20px;
    background: white;
}
.right{
    width: 80px;
    position: absolute;
    right: 20px;
    top:20px;
    padding: 20px;
    background: white;
}
.middle{
    background: white;
    padding:20px;
    /*关键代码*/
    margin: 0 160px 0 240px;
}

样式设置的关键点：
①最外面的div设置position：relative；
②左右两边的div分别设置position：absolute和相应的定位（top，left，right，bottom值）；
③最中间的div设置margin-right和margin-left。

最后上效果：
https://sunyueru.github.io/IFE/task_03/task_03.html