DIV+CSS布局
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=GB2312" /><title>DIV+CSS布局多行多列</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>