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

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