我正在尝试开发一个适用于任何浏览器的5部分顶部布局。它的5部分是因为你有中心菜单,跨越1024.
然后你有一个菜单的左侧和右侧有一些非重复的图像,这些图像会重复进入我想要无限的重复图像。
事实证明这很难,我可能已经忘记了它可能是不可能的......
我所做的就是如此接近我几乎可以尝到它。如果你能查看我的代码并告诉我“right_side”和它的宽度是怎么回事 - 它会导致滚动条出现严重问题。
我正在谈论的图片: http://i.imgur.com/xertW.jpg
以下是代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
body{
margin:0px;
padding:0px;
}
.left_stretch{
background-color:red;
z-index:-10;
position:absolute;
top:0px;
left:0px;
width:50%;
height:100%;
}
.left_side{
background-color:blue;
z-index:-5;
position:relative;
top:0px;
right:512px;
width:100%;
height:100%;
}
.center{
background-color:green;
height:500px;
width:1024px;
margin-left:auto;
margin-right:auto;
}
.right_side{
background-color:grey;
z-index:50;
position:relative;
top:0px;
left:512px;
width:100%;
height:100%;
}
.right_stretch{
background-color:orange;
z-index:-10;
position:absolute;
top:0px;
right:0px;
width:50%;
height:100%;
}
</style>
</head>
<body>
<div class="left_stretch">
<div class="left_side"></div>
</div>
<div class="center"></div>
<div class="right_stretch">
<div class="right_side"></div>
</div>
</body>
</html>
然后我当然担心ie 7和ie 6搞砸了......但我只想先解决这个问题......
有任何提示吗?
答案 0 :(得分:0)
意识到我可以编写你的代码,所以我测试了它。
你的<div class="right_side"></div>
导致它......它只是基本上悬挂在那里......创造空间。
我不确定为什么结构是这样的,所以即使修复它也不会给出任何暗示。 ..没有你想快速解决..这是删除该元素:D