烦烦烦！DIV布局出错，坐等帅哥们帮我解决下，用过无数方法了。

sky_Mo 2012-03-27 10:47:28

做了一个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没显边框。

...全文

150 10 打赏收藏转发到动态举报

写回复

用AI写文章

10 条回复

切换为时间正序

请发表友善的回复…

发表回复

sky_Mo 2012-03-28

打赏
举报

sky_Mo 2012-03-28

打赏
举报

[Quote=引用 2 楼的回复:]
可以参考如下：

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-co……
[/Quote]
谢谢了。我用百分比是想把整个内容板块放中间，占百分之70，两个百分之15放两张很长的大图。如果不用百分比有什么办法呢？网页在不同的分辨率下好像宽度不一样，所以我只好用百分比。。。不知道别的方法了。。。。悲剧的大一啊。。。。。

sky_Mo 2012-03-28

打赏
举报

[Quote=引用 1 楼的回复:]
最简单的办法在大DIV里面装一个一行三列的表格，然后在每个单元格里面各放一个表格
[/Quote]

这个方法不错，可以去试下，谢谢了。

hch126163 2012-03-28

打赏
举报

楼主知道现在很多浏览器都有开发人员工具吗？

可以很方便的看的每个dom 的盒模型。
很容易找到，原因所在

smartcoach 2012-03-28

打赏
举报

[Quote=引用 5 楼 bakdfkuk 的回复:]

顺便跟楼主说一下，作为大学生的你又悲剧了，也不是说大学教育怎么样，如果楼主学这方面的话，建议直接来学asp.net了，不要学asp了，不过html,css,js等都是基础
[/Quote]+1

bakdfkuk 2012-03-28

打赏
举报

顺便跟楼主说一下，作为大学生的你又悲剧了，也不是说大学教育怎么样，如果楼主学这方面的话，建议直接来学asp.net了，不要学asp了，不过html,css,js等都是基础

bakdfkuk 2012-03-28

打赏
举报

最外层用百分比吗？内部用相素的话，那就更简单了

酷儿 2012-03-28

打赏
举报

你用的是百分比。改成固定的宽度试一下吧。因为百分比他要填充满才行的。

bakdfkuk 2012-03-28

打赏
举报

可以参考如下：



<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>