当前位置: 代码迷 >> ASP.NET >> 烦烦烦!DIV布局出错,坐等帅哥们帮小弟我解决下,用过无数方法了
  详细解决方案

烦烦烦!DIV布局出错,坐等帅哥们帮小弟我解决下,用过无数方法了

热度:993   发布时间:2013-02-25 00:00:00.0
烦烦烦!DIV布局出错,坐等帅哥们帮我解决下,用过无数方法了。
做了一个DIV布局,打算用一个DIV,然后在这个DIV里面装三个表格,一个左一个中,一个右,但是右边那个始终不在这个大的DIV里面!用了无数方法了,始终不行。。。求解,小弟HTML没学好,大二了,想把ASP学好。希望大哥们帮下忙。
#left1
  {
  width:70%;
  height:400px;
  margin-left:15%;
  } 
 //布局中一个最外层的DIV ,宽度为总页面的70%,高为400px。
  #left2
  {
  margin-top:10px;
  width:20%;
  height:390px;
  float:left;
  border:1px solid #9966FF;
  }  
//里面嵌套的一个左边的表格,距离大的DIV顶层10PX距离。宽度为大DIV的20%
  #center1
  {
  margin-left:22%;
  margin-top:10px;
  width:43%;
  height:390px;
  border:1px solid #9966FF;
  }
//里面嵌套的一个中间的表格,距离大的DIV顶层10PX距离。宽度为大DIV的43% ,距离左边的DIV距离为2%(22-20)
//做了这两个布局一直没错
//第三个无论怎么做都没在这个大DIV里面,而在大DIV下面

<div id="left1">
  <table id="left2"><tr><td></td></tr></table>
  <table id="center1"><tr><td></td></tr></table>
  </div>
这里没把第三个表格写出来了,怎么写都没在里面,数字没算错,用了align,float 都没用,求解啊。。。这是为什么?为什么两个可以,三个就不行了。



上面是图片,最外层DIV没显边框。

------解决方案--------------------------------------------------------
最简单的办法在大DIV里面装一个一行三列的表格,然后在每个单元格里面各放一个表格
------解决方案--------------------------------------------------------
可以参考如下:
HTML code
<html><head><style type="text/css">*{margin:0px;padding:0px;}body{text-align:center;font-size:12px;}#container{width:1000px;height:200px;margin:0 auto;background-color:silver;}table{height:200px;}#left{width:30%;background-color:green;float:left;}#right{width:30%;background-color:yellow;float:right;}#center{margin:0% 31%;width:38%;background-color:red;}</style></head><body><div id="container"><table id="left"><tr><td>表左</td></tr></table><table id="right"><tr><td>表右</td></tr></table><table id="center"><tr><td>表中</td></tr></table></div></body></html>
  相关解决方案