【div模拟表格】魔鬼身材

【div模拟表格】魔鬼身材
ok，follow me

提醒:这只是div的一个2列表格原理，大家请勿覆盖dz的任何文件.div原则跟表格很像,也是大表格套小表格,不过就是把

<table><tr><td>给模拟成了 <div id=xxx>
</td></tr></table>给模拟成了</div>
注意首尾的嵌套,大家自己琢磨下吧.

一、htm里的表格正文内容

<div id="contain">
  <div id="mainbg">  


   <div id="left">
         
           <div id="menu1">
                   <div id="menu1-1"> <strong>左大列第一行数据</strong></div>
                   <div id="menu1-3">
                           <div id="menu1-3-left">左大列第二行（此行为一行两列表格，此为左列数据）</div>                          
                           <div id="menu1-3-right">左大列第二行（此行为一行两列表格，此为右列数据）</div>
                   </div>

                   <div id="menu1-3">
                           <div id="menu1-3-left">左大列第三行（此行为一行两列表格，此为左列数据）</div>                          
                           <div id="menu1-3-right">左大列第三行（此行为一行两列表格，此为右列数据）</div>
                   </div>
           </div>                  


           <div id="menu1">
                   <div id="menu1-1"> <strong>左大列第四行数据</strong></div>
                   <div id="menu1-2"></div>
           </div>

    </div>
  



  
      <div id="right">右大列数据
        </div>

   
  </div>  
</div>


二、css定义



#contain{
margin-right: auto;
margin-left: auto;
width: 770px;
}
#mainbg{
width:770px;
padding: 0px;
background: #fff;
float: left;
}
#left{
float: left;
margin: 2px 2px 0px 0px;
padding: 0px;
background: #fff;
width: 540px;
text-align:left;
}
#menu1{
float: left;
padding: 0px;
margin: 0px 0px 5px 0px;
border: 2px solid #EFEFEF;
width: 534px;
text-align:left;
}
#menu1-1{
float: left;
padding: 3px;
margin: 1px 0px 0px 0px;
width: 540px;
background: #E5ECF9;
text-align:left;
color:#333333;
font-size:14px;
height:18px;
}
#menu1-2{
float: left;
padding: 3px;
margin: 2px 0px 0px 0px;
width: 540px;
text-align:left;
color:#333333;
font-size:14px;
height:165px;
}
#menu1-3{
float: left;
padding: 3px;
margin: 2px 0px 0px 0px;
width: 540px;
text-align:left;
color:#333333;
font-size:14px;
height:75px;
}
#menu1-3-left{
float: left;
margin: 2px 2px 0px 5px;
padding: 0px;
background: #fff;
width: 260px;
text-align:left;
line-height:20px;
}
#menu1-3-right{
float: right;
margin: 2px 0px 2px 0px;
padding:0px;
width: 260px;
background: #fff;
text-align:left;
line-height:20px;
}#right{
float: right;
margin: 2px 0px 2px 0px;
padding:0px;
width: 220px;
background: #fff;
text-align:right;
}

三，解释

红色是模拟表格的样子，定义边框色彩等等
绿色是让左大列中的小列数据进行定位

[ 本帖最后由 cat0086 于 2006-5-11 17:02 编辑 ]

沙发???

哈哈..想不到我也有今天啊....

不会用

怎么用？

看不太明白

具体给个例子吧,最好有个演示地址

不太会用哎，要改哪些东西呢。

有什么用 又不讲  要来干吗

晕，已经讲的很清楚了，懂html应该就能改的
只是提供一个思路，不是直接覆盖的插件啊