实现一个浮动布局，红色容器中每一行的蓝色容器数量随着浏览器宽度的变化而变化
<!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>