利用CSS相对定位进行多行多列布局
| 以下是引用片段： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>无标题文档</title> <style type="text/css"> <!-- body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; line-height: 20px; color: #000000; } #head{ margin-right:auto; margin-left:auto; width:770px; height:80px; background:#A66300; } .nav{ clear:both; margin-right:auto; margin-left:auto; width:770px; height:25px; line-height:25px; background:#415800; } #main_box{ /*正文区大容器*/ width:770px; margin-right:auto; margin-left:auto; background:#EFEFEF; } .row{ /*定义每行*/ width:100%; clear:both; } .left,.right{ float:left; width:150px; background:#A6A6A6; } .right{ float:right; } .left2{ /*用在四列布局上*/ float:left; width:235px; background:#333; color:#FFF; } .left3{ /*用在五列布局上*/ border-right:1px solid #FFF; width:153px; background:#888; float:left; } .middle{ width:470px; background:#6699CC; float:left; } #foot{ margin-right:auto; margin-left:auto; width:770px; background:#A66300; clear:both; } --> </style> </head> <body> <div id="head"></div> <div class="nav">nav</div> <!--内容区开始--> <div id="main_box"> <!--三列左侧--> <div class="row"> <div class="left"> <p>.left{<br /> float:left;<br /> width:150px;<br /> background:#A6A6A6;<br /> }</p> </div> <div class="middle"> <p>.middle{<br /> width:470px;<br /> background:#6699CC;<br /> float:left;<br /> }</p> </div> <div class="right"> <p>.right{ <br /> float:right;<br /> width:150px;<br /> background:#999;<br /> } </p> </div> </div> <!--三列结束--> <div class="nav">nav</div> <!--四列开始--> <div class="row"> <div class="left2"> <p>四列的第一列</p> <p> </p> </div> <div class="left"> <p>四列的第二列</p> <p> </p> </div> <div class="left2"> <p>四列的第三列</p> <p> </p> </div> <div class="right"> <p>四列的第四列</p> <p> </p> </div> </div> <!--四列结束--> <div class="nav">nav</div> <!--五列开始--> <div class="row"> <div class="left3"> <p>这是五列的第一列</p> <p> </p> <p> </p> </div> <div class="left3"> <p>这是五列的第二列</p> <p> </p> <p> </p> </div> <div class="left3"> <p>这是五列的第三列</p> <p> </p> <p> </p> </div> <div class="left3"> <p>这是五列的第四列</p> <p> </p> <p> </p> </div> <div class="left3"> <p>这是五列的第五列</p> <p> </p> <p> </p> </div> </div> </div> <!--尾部区--> <div id="foot"> #foot{<br /> margin-right:auto;<br /> margin-left:auto;<br /> width:770px; <br /> background:#A66300;<br /> clear:both;<br /> } </div> <!--End--> </body> </html> |
