多栏布局 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin:0;padding:0;}
        .c1,.c2{width:100%;-webkit-column-width:150px;-moz-column-width:150px;-webkit-column-gap:150px;-moz-column-gap:150px;-webkit-column-rule:3px dashed #f60;-moz-column-rule:3px dashed #f60;}
        .c3{width:100%;height:300px;clear:both;background:red;color:#fff;}
    </style>
</head>
<body>
<div class="c1">
   哇哇哇哇哇哇哇
　　哇哇哇哇哇哇哇
　　哇哇哇哇哇哇哇
　　哇哇哇哇哇哇哇
　　哇哇哇哇哇哇哇
</div> <div class="c2">
 哇哇哇哇哇哇哇


　　哇哇哇哇哇哇哇




　　哇哇哇哇哇哇哇




　　哇哇哇哇哇哇哇




　　哇哇哇哇哇哇哇


</div> <div class="c3">


 哇哇哇哇哇哇哇




　　哇哇哇哇哇哇哇




　　哇哇哇哇哇哇哇




　　哇哇哇哇哇哇哇




　　哇哇哇哇哇哇哇


</div> </body> </html>




 






            

            
posted @ 
2016-08-08 16:32 
dongxiaolei 
阅读(128) 
评论(0) 
编辑 
收藏 
举报