CSS实现三栏式布局

三栏式布局

要求：左右两栏宽度固定，中间一栏根据父元素宽度填充满，父元素高度取决于三个子元素中最高的高度。

采用两种方法用CSS实现了三栏式布局，下面分别介绍一下这两种方法

方法一：

• 左列：float:left；
  
• 右列：float:right;
  
• 中间列：margin-left:左宽度，margin-right:右宽度；
• 父元素：overflow:hidden(清除浮动)
• 详细代码如下

#container{border:1px solid #999;background:#eee;padding:20px;overflow:hidden;}/*左边*/#container .left{float:left;width:160px;background:#fff;border:1px solid #999;}/*右边*/#container .right{float:right;background:#fff;width:120px;border:1px solid #999;}/*中间自适应部分*/#container  .center{border:1px solid #999;background:#fff;/*为了使中间自适应*/margin-left:160px;margin-right:120px;}

方法二：又称为双飞翼布局

• 父元素：overflow:hidden;
• 中间列：float:left; width:100%; padding:0 220px 0 190px;
• 左列： float:left; width:190px;   margin-left:-100%(使其移动到上一行的最左边);  position:relative;left:-190px;
• 右列： float:left; width:220px;   margin-left:-220px(使其移动到上一行的最右边);  position:relative;right:-220px;
• 详细代码如下

.left {          float: left;           width: 190px;      background:red;      margin-left:-100%;      position:relative;   left:-190px;   }   .right {        float:left;        width: 220px;background:blue;margin-left:-220px;position:relative;right:-220px; }  .center {           float: left;         width: 100%;    background:green;  }  #container{padding:20px 220px 20px 190px;overflow:hidden;border:1px solid #999;}

两种方法的区别

• 由于方法二三列全使用float定位，当浏览器缩小到一定范围，三列布局会变为两列甚至一列
• 而方法一中，中间列未采用float定位，所以无论浏览器怎么缩小，仍然是三列布局，只是中间列的宽度会越来越窄。

 CSS中：position的取值及各自定位方式

• static：

  元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

• relative:

  元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。不会脱离文档流，相对于元素原来的正常位置进行定位

• absolute：

  元素框从文档流完全删除，即：脱离了文档流。
  绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
  元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样 。
  元素定位后生成一个块级框，而不论原来它在正常流中是何种类型的框。
  

• fixed：

  元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
  即：元素脱离文档流，相对于浏览器视口进行定位。