折腾了好些天的css+div排版，还是没能解决，请教~~急

Question

我用过
如下 法，还有很多，都不行!!!!
<style>#header{
background: #EEE;}
#left{
float: left; 
margin: 0px 0px 0px 0px; 
padding: 0px; 
background: #F2F3F7; 
width: 0px;
text-align:left;
}
</style><div id="header" style="height: 26px;width:  600px"><div id="left" style="height: 1px;width: 295px">
<div id="left" style="height: 1px;width: 60px"></div>
<div id="left" style="height: 1px;width: 1px"></div>
<div id="left" style="height: 1px;width: 122px"></div>
<div id="left" style="height: 1px;width: 101px"></div>
<div id="left" style="height: 1px;width: 11px"></div>
</div>
<div id="left" style="height: 24px;width: 295px">
<div id="left" style="height: 24px;width: 60px"></div>
<div id="left" style="height: 24px;width: 224px">tads1</div>
<div id="left" style="height: 24px;width: 11px"></div>
</div>
<div id="left" style="height: 1px;width: 295px">
<div id="left" style="height: 1px;width: 60px"></div>
<div id="left" style="height: 1px;width: 1px"></div>
<div id="left" style="height: 1px;width: 122px"></div>
<div id="left" style="height: 1px;width: 101px"></div>
<div id="left" style="height: 1px;width: 11px"></div>
</div>
<div id="left" style="height: 26px;width: 76px">
<div id="left" style="height: 26px;width: 76px">tads2</div>
</div>
<div id="left" style="height: 1px;width: 229px">
<div id="left" style="height: 1px;width: 157px"></div>
<div id="left" style="height: 1px;width: 72px"></div>
</div>
<div id="left" style="height: 24px;width: 229px">
<div id="left" style="height: 24px;width: 157px"></div>
<div id="left" style="height: 24px;width: 72px"></div>
</div>
<div id="left" style="height: 1px;width: 229px">
<div id="left" style="height: 1px;width: 157px"></div>
<div id="left" style="height: 1px;width: 72px"></div>
</div>
</div>

Answer 1

看看，是不是这样的效果：<style>
#dyDiv {width:700px;}
#dyDivA {width:304px;float:left;}
.dyLDiv {width:100%;border-top:1px solid #008000;border-bottom:1px solid #008000;border-left:1px solid #008000;}
.dyLSDiv {width:100%;border-bottom:1px solid #008000;border-left:1px solid #008000;}
.dyLDivA {width:60px;float:left;border-right:1px solid #008000;}
.dyLDivC {width:131px;float:left;border-right:1px solid #008000;}
.dyLDivD {width:101px;float:left;border-right:1px solid #008000;}
.dyLDivE {width:11px;float:left;border-right:1px solid #008000;}
.dyLSDivF {width:232px;float:left;border-right:1px solid #008000;}
#dyDivB {width:74px;border-top:1px solid #008000;border-bottom:1px solid #008000;float:left;height:58px;}
#dyDivC {width:232px;float:left;border-left:1px solid #008000;}
.dyRDiv {width:100%;}
.dyRBDiv {width:100%;border-bottom:1px solid #008000;}
.dyRDivA {float:left;width:157px;border-top:1px solid #008000;border-right:1px solid #008000;}
.dyRDivB {float:left;width:74px;border-top:1px solid #008000;border-right:1px solid #008000;}
</style>
<div id="dyDiv">
<div id="dyDIvA">
<div class="dyLDiv">
<div class="dyLDivA"></div>
<div class="dyLDivC"></div>
<div class="dyLDivD"></div>
<div class="dyLDivE"></div>
</div>
<div class="dyLSDiv">
<div class="dyLDivA"></div>
<div class="dyLSDivF">tads1</div>
<div class="dyLDivE"></div>
</div>
<div class="dyLSDiv">
<div class="dyLDivA"></div>
<div class="dyLDivC"></div>
<div class="dyLDivD"></div>
<div class="dyLDivE"></div>
</div>
</div>
<div id="dyDIvB">tads2</div>
<div id="dyDIvC">
<div class="dyRDiv">
<div class="dyRDivA"></div>
<div class="dyRDivB"></div>
</div>
<div class="dyRDiv">
<div class="dyRDivA"></div>
<div class="dyRDivB"></div>
</div>
<div class="dyRBDiv">
<div class="dyRDivA"></div>
<div class="dyRDivB"></div>
</div>
</div>
</div>

Answer 2

看看我的说明，，你用的css太多了！

Answer 3

你这个表单的复杂程度比得上一个页面的布局，通常一个页面，CSS也就这么多！

Answer 4

http://pysj.v-ec.com/ 以前做的，没用DIV+CSS布局，后面的一些CASE倒都是用DIV+CSS布局...

Answer 5

我在做，层 到 表格 到 css+div 的转换中遇到了，急手的问题，，，，希望大家能讨论一下，找到一个解决的办法哦~~

Answer 6

??我还确实没明白楼主的意思？不是只要把你想要的效果表现出来了就可以么？
怎么能“我有一个效果，我给定了你CSS，你就拿这些帮我实现这个效果”要知道你写的CSS在别人看来并不见得也适用！

Answer 7

1、你的书写基本上是对的，只是没有注意到那些指定为1px高的div实际上是要占一个字符的高度的
2、div默认不是垂直居中的，这一点与td不同。如何实现垂直居中，目前我还不知道
3、在你示例的table代码里，缺少了第四的tr的内容。所以表格本身是有毛病的
<td width="74px" colspan="2" rowspan="3">tads2</td>
中的colspan="2"就无法体现
4、下面是略做修改后的代码，并附上测试用的js代码。注意字体的设置<html><head>
<meta http-equiv="Content-Language" content="zh-cn">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>#header{
background: #EEE;}
#left{
float: left; 
margin: 0px 0px 0px 0px; 
padding: 0px; 
background: #F2F3F7; 
width: 0px;
text-align:left;
}
div1 { border:1 solid black }
</style>
<table id='tab' width="600px" height="26px" border="1" bordercolor="#008000" cellpadding="0" cellspacing="0"  style="z-index:1212;border: 0px solid #008000;border-collapse:collapse;position:absolute; left:3px; top:259px">
<tr height="1px">
<td width="60px"></td>
<td width="1px"></td>
<td width="122px"></td>
<td width="101px"></td>
<td width="11px"></td>
<td width="74px" colspan="2" rowspan="3">tads2</td>
<td width="157px"></td>
<td width="72px"></td>
</tr>
<tr height="24px">
<td width="60px"></td>
<td width="1px" colspan="3">tads1</td>
<td width="11px"></td>
<td width="157px"></td>
<td width="72px"></td>
</tr>
<tr height="1px">
<td width="60px"></td>
<td width="1px"></td>
<td width="122px"></td>
<td width="101px"></td>
<td width="11px"></td>
<td width="157px"></td>
<td width="72px"></td>
</tr>
</table><div id="header" style="height: 26px;width:  600px; font-size:0px"><div id="left" style="height: 26px;width: 295px">
<div id="left" style="height: 1px;width: 60px"></div>
<div id="left" style="height: 1px;width: 1px"></div>
<div id="left" style="height: 1px;width: 122px"></div>
<div id="left" style="height: 1px;width: 101px"></div>
<div id="left" style="height: 1px;width: 11px"></div>
<div id="left" style="height: 24px;width: 60px"></div>
<div id="left" style="height: 24px;width: 224px; font-size:10pt">tads1</div>
<div id="left" style="height: 24px;width: 11px"></div>
<div id="left" style="height: 1px;width: 60px"></div>
<div id="left" style="height: 1px;width: 1px"></div>
<div id="left" style="height: 1px;width: 122px"></div>
<div id="left" style="height: 1px;width: 101px"></div>
<div id="left" style="height: 1px;width: 11px"></div>
</div><div id="left" style="height: 26px;width: 76px">
<div id="left" style="height: 26px;width: 76px; font-size:14px">tads2</div>
</div><div id="left" style="height: 26px;width: 229px">
<div id="left" style="height: 1px;width: 157px"></div>
<div id="left" style="height: 1px;width: 72px"></div>
<div id="left" style="height: 24px;width: 157px"></div>
<div id="left" style="height: 24px;width: 72px"></div>
<div id="left" style="height: 1px;width: 157px"></div>
<div id="left" style="height: 1px;width: 72px"></div>
</div>
</div>
<div id='view'></div>
<script>
document.onmouseover = foo;function foo() {
  el = event.srcElement;
  s = el.tagName +":"+ el.offsetWidth +","+ el.offsetHeight;
  view.innerHTML = s;
}
</script>

Answer 8

如此用CSS+DIV少见，建议多学习一下如何更好的使用CSS+DIV

Answer 9

我做了一个 动态层 到 表格 到 css+div 的转换 到这里怎么都没法过，，，好晕