一个div里嵌套其它几个div为什么定位老出错
我想用div而非table做一个banner，但是发现div里嵌套其它东西很难定位，不知道什么原因，我发一些代码和图片大家帮忙看一下。father是banner的框架，l...
我想用div而非table做一个banner，但是发现div里嵌套其它东西很难定位，不知道什么原因，我发一些代码和图片大家帮忙看一下。father是banner的框架，logo1logo2还有1234为什么不显示在banner里面
<body>
<div id="container">
<div id="father">
<div class="bannerleft"></div>
<div class="bannerright"></div>
</div>
<div class="logo1"></div>
<div class="logo2"></div>
<div class="1"></div>
<div class="2"></div>
<div class="3"></div>
<div class="4"></div>
<div id="image"></div>
<div id="main">
<table width="1024" border="0" align="center">
<tr>
<td width="174" height="110"></td>
<td width="344"><a href="#">游戏角色建模<br />
游戏场地建模<br />
工业产品建模</a></td>
<td width="325"><a href="#">游戏动漫后期<br />
平面广告设计<br />
影楼后期处理</a></td>
<td width="153"><a href="#">actionscript<br />
flash交互设计<br />
flash游戏开发</a></td>
</tr>
</table>
</div>
<div id="text">此处显示 id "text" 的内容</div>
</div>
</body>
</html>
css是这样的
body {
font-size: 12px;
color: #333;
background-color: #000;
padding: 0px;
margin: 0px;
}
#container{
position:relative;
padding:0px;
width:1024;
margin-left:auto;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
}
#father{
padding: 0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
height: 133px;
width: 1024px;
}
.bannerleft {
position: relative;
height: 133px;
width: 11px;
background-image: url(../image/bannerhudu.jpg);
margin: 0px;
padding: 0px;
float: left;
left: 0px;
top: 0px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
.bannerright {
background-image: url(../image/copan1xiangsu.jpg);
background-repeat: repeat;
height: 133px;
width: 1000px;
position: relative;
left: 11px;
top: 0px;
margin: 0px;
padding: 0px;
}
.logo1 {
background-image: url(../image/logo.jpg);
position: relative;
z-index: 4;
height: 66px;
width: 204px;
background-repeat: no-repeat;
top: 14px;
left: 78px;
margin: 0px;
padding: 0px;
float: none;
}
.logo2 {
background-image: url(../image/logo2.png);
position: relative;
z-index: 5;
height: 82px;
width: 82px;
left: 297px;
top: 46px;
}
.1 {
background-image: url(../image/1.png);
position: relative;
height: 44px;
width: 72px;
top: 83px;
z-index: 9;
left: 469px;
margin: 0px;
padding: 0px;
}
.2 {
background-image: url(../image/2.png);
position: relative;
height: 44px;
width: 57px;
top: 83px;
left: 622px;
z-index: 10;
}
.3 {
background-image: url(../image/3.png);
position: relative;
height: 44px;
width: 57px;
left: 767px;
top: 83px;
z-index: 11;
}
.4 {
background-image: url(../image/4.png);
position: relative;
height: 44px;
width: 57px;
left: 912px;
top: 83px;
z-index: 12;
}
这是显示的不合理的布局 展开
<body>
<div id="container">
<div id="father">
<div class="bannerleft"></div>
<div class="bannerright"></div>
</div>
<div class="logo1"></div>
<div class="logo2"></div>
<div class="1"></div>
<div class="2"></div>
<div class="3"></div>
<div class="4"></div>
<div id="image"></div>
<div id="main">
<table width="1024" border="0" align="center">
<tr>
<td width="174" height="110"></td>
<td width="344"><a href="#">游戏角色建模<br />
游戏场地建模<br />
工业产品建模</a></td>
<td width="325"><a href="#">游戏动漫后期<br />
平面广告设计<br />
影楼后期处理</a></td>
<td width="153"><a href="#">actionscript<br />
flash交互设计<br />
flash游戏开发</a></td>
</tr>
</table>
</div>
<div id="text">此处显示 id "text" 的内容</div>
</div>
</body>
</html>
css是这样的
body {
font-size: 12px;
color: #333;
background-color: #000;
padding: 0px;
margin: 0px;
}
#container{
position:relative;
padding:0px;
width:1024;
margin-left:auto;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
}
#father{
padding: 0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
height: 133px;
width: 1024px;
}
.bannerleft {
position: relative;
height: 133px;
width: 11px;
background-image: url(../image/bannerhudu.jpg);
margin: 0px;
padding: 0px;
float: left;
left: 0px;
top: 0px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
.bannerright {
background-image: url(../image/copan1xiangsu.jpg);
background-repeat: repeat;
height: 133px;
width: 1000px;
position: relative;
left: 11px;
top: 0px;
margin: 0px;
padding: 0px;
}
.logo1 {
background-image: url(../image/logo.jpg);
position: relative;
z-index: 4;
height: 66px;
width: 204px;
background-repeat: no-repeat;
top: 14px;
left: 78px;
margin: 0px;
padding: 0px;
float: none;
}
.logo2 {
background-image: url(../image/logo2.png);
position: relative;
z-index: 5;
height: 82px;
width: 82px;
left: 297px;
top: 46px;
}
.1 {
background-image: url(../image/1.png);
position: relative;
height: 44px;
width: 72px;
top: 83px;
z-index: 9;
left: 469px;
margin: 0px;
padding: 0px;
}
.2 {
background-image: url(../image/2.png);
position: relative;
height: 44px;
width: 57px;
top: 83px;
left: 622px;
z-index: 10;
}
.3 {
background-image: url(../image/3.png);
position: relative;
height: 44px;
width: 57px;
left: 767px;
top: 83px;
z-index: 11;
}
.4 {
background-image: url(../image/4.png);
position: relative;
height: 44px;
width: 57px;
left: 912px;
top: 83px;
z-index: 12;
}
这是显示的不合理的布局 展开
4个回答
展开全部
你的意思是排到一行吧，div中嵌套div只有左中右三种！像你5个div它是离左边的距离有变化，但是到不了一行：
可以这样写:
<div id="1">
<div id="11">
<div id="111"></div>
<div id="112"></div>
</div>
<div id="12">
<div id="121"></div>
<div id="123"></div>
<div id="122"></div>
</div>
</div>
然后用float：left和right设置就行了大小位置自己看，左中右div的中间的要放在右边后边写，中间的自动填补空白，在火狐中中间的div需要设置margin-left，可以和左边的一样，那样就没缝隙，大于左边，就有缝隙了。
可以这样写:
<div id="1">
<div id="11">
<div id="111"></div>
<div id="112"></div>
</div>
<div id="12">
<div id="121"></div>
<div id="123"></div>
<div id="122"></div>
</div>
</div>
然后用float：left和right设置就行了大小位置自己看，左中右div的中间的要放在右边后边写，中间的自动填补空白，在火狐中中间的div需要设置margin-left，可以和左边的一样，那样就没缝隙，大于左边，就有缝隙了。
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
如果你熟悉table结构，建议你使用table结构布局，这样不会乱。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
要把结构给整理清楚了 就不会了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
position都用错了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
