CSS 三栏自适应布局

CSS布局 这个很基础,方法也很多,要留意的知识点还是有一些。

比如IE6的触发layout  *zoom:1

比如使用浮动后的清除浮动  clear:both

需求的延伸也会有一些:

比如三栏等高

比如左栏或者右栏固定,就是position:fixed的运用,当然ie6不支持

基本代码结构:

<div class="con">
    <div class="left"></div>
    <div class="main"></div>
    <div class="right"></div>
</div>

 

按照运用的知识点总结一下一下几种方式

方案一  相对定位

  全absolute

      左栏+右栏 absolute

方案二  负margin

      float+负margin

      inline-block+负margin

方案三  弹性盒模型 flex-box

 

posted @ 2013-10-06 21:16  web 的世界  阅读(221)  评论(0编辑  收藏  举报