浮动

实现一个浮动布局，红色容器中每一行的蓝色容器数量随着浏览器宽度的变化而变化 

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>浮动布局</title>
        <style type='text/css'>
         #wrapper{
                  background:red;
                  width:80%;
                  height:80%;
                  position:absolute;}  
         #div1{
                  background:blue;
                  width:200px;
                  height:200px;
                  position:relative;
                  float:left;
                  margin:10px;}
         #div2{
                  background:blue;
                  width:200px;
                  height:200px;
                  position:relative;
                  float:left;
                  margin:10px;}
                 
         #div3{
                  background:blue;
                  width:200px;
                  height:200px;
                  position:relative;
                  float:left;
                  margin:10px;}
         #div4{
                  background:blue;
                  width:200px;
                  height:200px;
                  position:relative;
                  float:left;
                  margin:10px;}        
         #div5{
                  background:blue;
                  width:200px;
                  height:200px;
                  position:relative;
                  float:left;
                  margin:10px;}   
         #div6{
                  background:blue;
                  width:200px;
                  height:200px;
                  position:relative;
                  float:left;
                  margin:10px;}   
         #div7{
                  background:blue;
                  width:200px;
                  height:200px;
                  position:relative;
                  float:left;
                  margin:10px;}   
         #div8{
                  background:blue;
                  width:200px;
                  height:200px;
                  position:relative;
                  float:left;
                  margin:10px;}   
         #div9{
                  background:blue;
                  width:200px;
                  height:200px;
                  position:relative;
                  float:left;
                  margin:10px;}   
     </style>
    </head>
    <body>
       <div id="wrapper">
       <div id="div1"></div>
       <div id="div2"></div>
       <div id="div3"></div>
       <div id="div4"></div>
       <div id="div5"></div>
       <div id="div6"></div>
       <div id="div7"></div>
       <div id="div8"></div>
       <div id="div9"></div>
       </div>
    </body>
</html>

 

posted @ 2015-06-26 11:55  hou_hou  阅读(261)  评论(0)  编辑  收藏  举报