固定宽度三列布局
这很基础，我们直接看代码便能明白：

XML/HTML Code 复制内容到剪贴板 <div id="wrapper">     < div   id = "header" > header </ div >      < div   id = "body"   class = "cls" >       < div   id = "aside" >        < div   class = "inner" >        aside         < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br >        </ div >       </ div >       < div   id = "content"   class = "cls" >        < div   id = "main" >         < div   class = "inner" >         main          < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br >         </ div >        </ div >        < div   id = "content-aside" >         < div   class = "inner" >         content-aside          < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br > < br >         </ div >        </ div >           </ div >      </ div >      < div   id = "footer" > footer </ div >    </ div >    CSS Code 复制内容到剪贴板 #header{ width: 980px; height: 90px; margin: 0 auto; background: #f60;}    #body {  width :  980px ;  margin : 0  auto ;}    #aside {  float :  left ;  width :  240px ;  background :  #ccc ;}    #conten t{  margin-left :  240px ;}    #main {  float :  left ;  width :  540px ;  background : pink;}    #conten t-aside{   float :  left ;  width :  200px ;  background : orange; }    #footer {  width :  980px ;  height :  90px ;  margin : 0  auto ;  background :  #08f ;}  

实例：实现三列图片等宽等间距布局

每个图片块左浮动,宽30%,左外边距2.5%:
100%=(2.5% 30%) (2.5% 30%) (2.5% 30%) 2.5%

CSS Code 复制内容到剪贴板 <!DOCTYPE html>     <html>     <head>     <meta charset= "utf-8" >     <meta name= "viewport"   content = "width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0" >     <title>三列图片等宽布局</title>     <style>     * {          margin : 0;          padding : 0;     }     img {          display :  block ;          width : 30%;          margin : 2.5% 0 0 2.5%;          float :  left ;     }     </style>     </head>     <body>     <div>     <img  src = "byd.jpg"  /><img  src = "byd.jpg"  /><img  src = "byd.jpg"  />     <img  src = "byd.jpg"  /><img  src = "byd.jpg"  /><img  src = "byd.jpg"  />     <img  src = "byd.jpg"  /><img  src = "byd.jpg"  /><img  src = "byd.jpg"  />     </div>         </body>     </html>   

width: 30%; 表示父级元素宽度的30%.
height: 30%; 如果没有设置父级元素的具体高度,那么这个height是没有效果的.
要实现响应式的正方形,可以使用单位vw(Viewport Width):

CSS Code 复制内容到剪贴板 .square {          width : 30%;          height : 30vw;          background :  url ( "byd.jpg" )  no-repeat   scroll   center  0  transparent ;          background - size : 100% 100%;          margin : 2.5% 0 0 2.5%;          float :  left ;     }   

不过需要注意的是,低版本IE和低版本Android/iOS浏览器都不支持视窗(viewport)单位.
或者使用JS根据宽设置高,保证兼容性:

JavaScript Code 复制内容到剪贴板 <script src="jquery.js"></script>     <script>     $(document).ready( function (){         $( "img" ).height($( "img" ).width());     });     $(window).resize( function (){         $( "img" ).height($( "img" ).width());     });     </script>   

百分比布局也可以看做是一种响应式布局.
简单实用的 百分比布局 还是很适合手机WAP页面布局的:

CSS Code 复制内容到剪贴板 min-width:320px;     max-width : 980px ;     width :100%;     overflow -x:  hidden ;     margin : 0  auto ;   

最小宽度320px,最大宽度980px,在320px和980px之间自动适应宽度,看起来还行.
在<img>标签里只用设置width属性百分比值,比如width="40%",不用设置height属性,这样图片能够自行按原比例缩放.
容器里面的块,同样可以用百分比布局,比如左边的60%,右边的40%.