用 div 来排版

用 div 来做3行、中间那行是2列的表格,兼容 FF3。还有问题需要详细解决。

<!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=gb2312" />
<title>Div Tables</title>

<style type="text/css">
.clearDiv {
 clear: both;
}

.purpleTable{
 margin-left: auto; margin-right: auto;
 width:700px;
}
.purpleTable .CountHead {
 background-color: #E8E5F8;
 border: 1px solid #CAC4E8;
 text-align: center;
 font-weight: bold;
}

.purpleTable .CountBodyLeft {
 border-left-color: #CAC4E8;
 border-left-width: 1px;
 border-left-style: solid;
 float: left;
 width: 70%;
 background-color: #FFFFFF;
 text-align: left;
}
.purpleTable .CountBodyRight {
 float: right;
 border-right-width: 1px;
 border-right-style: solid;
 border-right-color: #CAC4E8;
 width: 29.7%;
 text-align: right;
 background-color: #FFFFFF;
}
.purpleTable .CountFoot {
 border-top-style: none;
 border-right-style: solid;
 border-bottom-style: solid;
 border-left-style: solid;
 border-right-color: #CAC4E8;
 border-bottom-color: #CAC4E8;
 border-left-color: #CAC4E8;
 background-color: #E8E5F8;
 border-top-width: 0px;
 border-right-width: 1px;
 border-bottom-width: 1px;
 border-left-width: 1px;
}

.greenTable{
 margin-left: auto; margin-right: auto;
 width:700px;
}
.greenTable .CountHead {
 background-color: #EEF7E8;
 border: 1px solid #B3D997;
 text-align: center;
 font-weight: bold;
}

.greenTable .CountBodyLeft {
 border-left-color: #B3D997;
 border-left-width: 1px;
 border-left-style: solid;
 float: left;
 width: 70%;
 background-color: #FFFFFF;
 text-align: left;
}
.greenTable .CountBodyRight {
 float: right;
 border-right-width: 1px;
 border-right-style: solid;
 border-right-color: #B3D997;
 width: 29.7%;
 text-align: right;
 background-color: #FFFFFF;
}
.greenTable .CountFoot {
 border-top-style: none;
 border-right-style: solid;
 border-bottom-style: solid;
 border-left-style: solid;
 border-right-color: #B3D997;
 border-bottom-color: #B3D997;
 border-left-color: #B3D997;
 background-color: #EEF7E8;
 border-top-width: 0px;
 border-right-width: 1px;
 border-bottom-width: 1px;
 border-left-width: 1px;
 height: 20px;  /*在FF3下使用height会使下一个CountHead覆盖这个CountFoot*/
}

.redTable{
 margin-left: auto; margin-right: auto;
 width:700px;
}
.redTable .CountHead {
 background-color: #FEC5CC;
 border: 1px solid #F5787B;
 text-align: center;
 font-weight: bold;
}

.redTable .CountBodyLeft {
 border-left-color: #F5787B;
 border-left-width: 1px;
 border-left-style: solid;
 float: left;
 width: 70%;
 background-color: #FFFFFF;
 text-align: left;
}
.redTable .CountBodyRight {
 float: right;
 border-right-width: 1px;
 border-right-style: solid;
 border-right-color: #F5787B;
 width: 29.7%;
 text-align: right;
 background-color: #FFFFFF;
}
.redTable .CountFoot {
 border-top-style: none;
 border-right-style: solid;
 border-bottom-style: solid;
 border-left-style: solid;
 border-right-color: #F5787B;
 border-bottom-color: #F5787B;
 border-left-color: #F5787B;
 background-color: #FEC5CC;
 border-top-width: 0px;
 border-right-width: 1px;
 border-bottom-width: 1px;
 border-left-width: 1px;
}

.CenterDiv {
 text-align: center;
}
</style>
<div class="CenterDiv">
 <div class="purpleTable">
  <div class="CountHead">CountHead</div>
  <div class="CountBodyLeft">1</div>
  <div class="CountBodyRight">CountBodyRight</div>
  <div class="CountBodyLeft">2</div>
  <div class="CountBodyRight">CountBodyRight</div>
  <div class="CountBodyLeft">3</div>
  <div class="CountBodyRight">CountBodyRight</div>
  <div class="CountFoot">CountFoot</div>
 </div>
</div>
<hr>

<div class="CenterDiv">
 <div class="greenTable">
  <div class="CountHead">CountHead</div>
  <div class="CountBodyLeft">CountBodyLeft</div>
  <div class="CountBodyRight">CountBodyRight</div>
  <div class="CountBodyLeft">CountBodyLeft</div>
  <div class="CountBodyRight">CountBodyRight</div>
  <div class="ClearDiv"></div><!--这个有时候加了有用,有时候没用,希望有人能解释一下-->
  <div class="CountFoot">CountFoot</div>
 </div>
</div>

<hr>
<div class="CenterDiv">
 <div class="redTable">
  <div class="CountHead">CountHead</div>
  <div class="CountBodyLeft">CountBodyLeft</div>
  <div class="CountBodyRight">CountBodyRight</div>
  <div class="CountFoot">&nbsp;</div>
 </div>
</div>
<hr>
</body>
</html>

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据