CSS布局技巧-优快云博客

CSS布局一

实例一(居中)

 div#container{
     width:960px;
     height:650px;
     margin:0 auto;
     border:1px solid #ccc;
     /*就是说上下边距为0 左右自动，当浏览的大小大于600时，左右两边的margin平分大于出来的宽度*/ 
     /*但是，如果小于的话，就会出现滚动条*/
 }

优化：使用我们的max-width:960px; 就不会出现滚动条了滴呀；

所有主流浏览器，包括IE7+在内都支持 max-width 属性；

实例二(宽度自适应)

在三列布局中，实现宽度自适应，

原理：左右连个div float left 和right 中间的不浮动

css：

 body,div{
     margin:0;
     paddding:0; 
 }
 div{
     height:200px; 
 }
 .left{
     float:left;
     width:100px;
     background:green;
     _margin-right:-3px;  /*为了兼容我们ie的quirk模式*/
 }
 .right{
     float:right;
     width:100px;
     background:red;
     _margin-left:-3px;  /*为了兼容我们ie的quirk模式*/
 }
 .center{
     background:black;
     margin:0 100px;
     _margin:0 97px; /*为了兼容我们ie的quirk模式*/
 }

效果：

实例二：（高度自适应）

高度自适应就是高度能跟随浏览器窗口的大小改变而改变，典型的运用在一些后台界面中上面一栏高度固定用作菜单栏或导航栏，

下面一栏高度自适应用于显示内容

css（这样方法，不兼容ie6，啊~ie6 不兼容算了！不过这里又解决方案：http://www.cnblogs.com/2050/archive/2012/07/30/2615260.html）

body,div{
     margin:0;
     padding:0;
 }
 .top{
     background:blue;
     height:100px;
 }
 .main{
     background:green;
     width:100%;
     position:absolute;
     top:100px;
     bottom:0;
 }

实例三（多列等高）

body{
     padding:0;
     margin:0; 
 }
 .container{
     margin:0 auto; 
     width:600px;
     border:3px solid #ccc;
     overflow:hidden;
 }
 .left{
     float:left;
     width:150px;
     background:blue;
     padding-bottom:2000px;
     margin-bottom:-2000px;
 }
 .right{
     float:left;
     width:450px;
     background:green;
     padding-bottom:2000px;
      margin-bottom:-2000px;
 }