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

【 tulaoshi.com - Web开发 】

　　CSS制作网页的实例，利用CSS相对定位进行多行多列布局。

（本文来源于图老师网站，更多请访问https://www.tulaoshi.com/webkaifa/）

!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"

（本文来源于图老师网站，更多请访问https://www.tulaoshi.com/webkaifa/）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