CSS实战：利用CSS相对定位进行多行多列布局

2022-07-15 80酷酷网 80kuku.com

　　CSS制作网页的实例，利用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">  </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> 　 </body> </html>