css制作复杂表格，请给个结构

答案:5 悬赏:70 手机版

解决时间 2021-04-30 02:48

提问者网友：兔牙战士
2021-04-29 10:54

我想制作一个div的表格（非table的），感觉比较复杂，自己写的总出错。请高手帮我写个结构啊。

表格总宽900

分两列：左边100px 右边800px；

右边继续分上下两行：上行分8列，下行分两列；

上行8列要求左边1、2列靠左，1、2列总宽度为450px；右边3～8列宽度分别为48、48、48、68、48、68，其中3、4列的右边距为7px，5、6、7、8右边距为2px；

下行两列宽度a、b分别为626px和174px;

谢谢啦：）

最佳答案

五星知识达人网友：轻雾山林
2021-04-29 11:45

<!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{
   margin:0px;
   padding:0px;
}
#container{
   width:900px;
   margin:0px auto;
   zoom:1;
   overflow:hidden;
}
#left{
   width:100px;
   height:100px;
   float:left;
   background:#33CCFF;
}
#right{
   width:800px;
   height:100px;
   float:left;
   background:#FFCCFF;
}
.top{
   zoom:1;
   overflow:hidden;
}
.top_wrap{
   width:450px;
   background:#9900FF;
   float:left;
   zoom:1;
   overflow:hidden;
}
.top_column1{
   background:#009999;
   float:left;
   _width:300px;
   max-width:300px;
   height:50px;
}
.top_column2{
   background:#FFFFFF;
   float:left;
   width:150px;
   height:50px;
}
.top_column3{
   width:48px;
   height:50px;
   background:#990066;
   float:left;
   margin-right:7px;
   display:inline;
}
.top_column4{
   width:48px;
   height:50px;
   background:#FFCC66;
   float:left;
   margin-right:7px;
   display:inline;
}
.top_column5{
   width:48px;
   height:50px;
   background:#999933;
   float:left;
   margin-right:2px;
   display:inline;
}
.top_column6{
   width:68px;
   height:50px;
   background:#6666CC;
   float:left;
   margin-right:2px;
   display:inline;
}
.top_column7{
   width:48px;
   height:50px;
   background:#999999;
   float:left;
   margin-right:2px;
   display:inline;
}
.top_column8{
   width:68px;
   height:50px;
   background:#CC99CC;
   float:left;
   margin-right:2px;
   display:inline;
}
.bottom{
   zoom:1;
   overflow:hidden;
}
.bottom_column1{
   width:626px;
   height:50px;
   float:left;
   background:#CC6600;
}
.bottom_column2{
   width:174px;
   height:50px;
   float:left;
   background:#CCCCCC;
}
</style>
</head>

<body>
<div id="container">
<div id="left">左栏</div>
<div id="right">
   <div class="top">
       <div class="top_wrap">
           <div class="top_column1" >右栏上1</div><div class="top_column2">右栏上2</div>
       </div>
       <div class="top_column3">右栏上3</div>
       <div class="top_column4">右栏上4</div>
       <div class="top_column5">右栏上5</div>
       <div class="top_column6">右栏上6</div>
       <div class="top_column7">右栏上7</div>
       <div class="top_column8">右栏上8</div>
   </div>
   <div class="bottom">
       <div class="bottom_column1">右栏下1</div>
       <div class="bottom_column2">右栏下2</div>
   </div>
</div>
</div>
</body>
</html>

全部回答

1楼网友：举杯邀酒敬孤独
2021-04-29 15:14

<div >

<div >123</div>  <div >  <div> <div > <div >123</div> <div >123</div> </div> <div >123</div> <div >123</div> <div >123</div> <div >123</div> <div >123</div> <div >123</div> </div>

<div> <div ></div> <div ></div> </div> </div>

</div>

2楼网友：不如潦草
2021-04-29 14:14

3楼网友：孤老序
2021-04-29 13:08

这个可以编辑，有小的辅助软件

4楼网友：杯酒困英雄
2021-04-29 12:33

上布局图！

我要举报

如以上问答信息为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！