欢迎使用CSDN-markdown编辑器

总结几种css简单布局方式

1. 一列布局
   这是对应的html代码

   <div class="head">head</div>
   <div class="main">main</div>
   <div class="footer">footer</div>

   • 一列固定布局

     .head, .main, .footer{ width:960px; margin:0 auto;}

     当然在此之前已经设置了div的填充，也就是说所谓的一列布局，也就是将要布局的块设置一个固定宽度，然后使用margin: 0 auto来让它居中就行了

   • 一列自适应布局
     一列自适应布局相比于一列固定布局，只有一个区别，就是一列固定布局指定了块的固定宽度为多少像素，而一列自适应布局则是指定了宽度为相对与父元素的百分比。

2. 二列布局
   这是对应的html代码

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

   • 二列固定布局（说白了，就是一个float）

     .main{ width:960px; height:600px; margin:0 auto;}/*上面的一列布局*/
     .left{ width:300px; height:600px; background:#ccc; float:left;}/*二列左*/
     .right{ width:660px; height:600px; background:#FCC; float:right;}/*二列右*/

   • 二列自适应布局（说白了，也就是把宽度从固定像素变为固定百分比）

     .left{ width:20%; height:600px; background:#ccc; float:left;}
     .right{ width:80%; height:600px; background:#FCC; float:right;}

   • 二列居中自适应布局（其实也就是把居中布局和自适应布局结合起来）

     .main{ width:80%; height:600px; margin:0 auto;}
     .left{ width:20%; height:600px; background:#ccc; float:left;}
     .right{ width:80%; height:600px; background:#FCC; float:right;}

3. 三列布局
   这是对应的html代码

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

   • 三列左右固定布局
     也就是固定左右两列的宽度，同时使用绝对布局使它们分别处于最左端和最右端，但为了避免中间列的内容被覆盖，可以设置中间列的外边距使得只有显示出来的有效。

     .left{ width:240px; height:600px; background:#ccc; position:absolute; left:0; top:0;}
     .main{ height:600px; margin:0 240px; background:#9CF;}
     .right{ height:600px; width:240px; position:absolute; top:0; right:0; background:#FCC;}

   • 三列自适应布局（其实这个和两列自适应很像，区别只是在于两列布局中使用了float，而三列布局中使用了绝对布局）

     .left{ width:20%; height:600px; background:#ccc; position:absolute; left:0; top:0;}
     .main{ height:600px; margin:0 20%; background:#9CF;}
     .right{ height:600px; width:20%; position:absolute; top:0; right:0; background:#FCC;}

4. 最后是混合布局
   所谓混合布局，其实就是将一列，二列和三列布局结合起来，使得你中有我，我中有你的一类布局方式

   • 选择其中一种自适应的布局来作为实例

   <div class="head">head</div>
   <div class="left">left</div>
   <div class="right">right</div>
   <div class="main">main</div>
   <div class="footer">footer</div>

   .head{ height:100px;background:#9CF;}
   .left{ width:20%; height:600px; background:#ccc; float:left;}
   .main{margin:0 20%;height:600px; background:#9CC ;}
   .right{ width:20%; height:600px;background:#FCC; float:right;}
   .footer{ height:50px; background:#9F9; clear:both;}