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

前言：最近在写百度前端学院的题目，打算这个星期快速得把第一阶段的任务过一遍。三栏式布局可以有两种写法，用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