目前，无论何时缩小页面，我的元素最终都会在彼此之上移动，而不仅仅是导致页面滚动。任何人都可以指出正确的方向吗？
<html>
<head>
<title> Div Blocks</title>
<style type="text/css">
html {
background: url(bgo.jpg) no-repeat center center ;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position:relative;
}
a{
cursor : url("nav.png"), pointer;
}
div.one a
{
position:absolute;
top:50px;
left:60px;
width: 400px;
height: 100px;
text-decoration:none;
background:url("branding.png");
background-repeat:no-repeat;
padding-bottom:35px;
}
div.one a:hover
{background: url("brandingalt.png");
background-position: 0px 0px;
background-repeat:no-repeat;
}
div.two a
{
position: absolute;
top:264px;
left:60px;
width: 400px;
height: 100px;
text-decoration:none;
background:url("marketing.png");
background-repeat:no-repeat;
padding-bottom:35px;
}
div.two a:hover
{background: url("marketingalt.png");
background-position:0px 0px;
background-repeat:no-repeat;
}
div.three a
{
position: absolute;
top:457px;
left:56px;
width: 500px;
height: 100px;
text-decoration:none;
background:url("ecommerce.png");
background-repeat:no-repeat;
padding-bottom:20px;
}
div.three a:hover
{background: url("ecommercealt.png");
background-position: 0 0px;
background-repeat:no-repeat;
}
div.r1 a
{
position: absolute;
top:50px;
right:60px;
width: 400px;
height: 100px;
text-decoration:none;
background:url("webdesign.png");
background-repeat:no-repeat;
padding-bottom:25px;
}
div.r1 a:hover
{background: url("webdesignalt.png");
background-position: 0px 0px;
background-repeat:no-repeat;
}
div.r2 a
{
position: absolute;
top:254px;
right:75px;
width: 450px;
height: 150px;
text-decoration:none;
background:url("optimization.png");
background-repeat:no-repeat;
padding-bottom:20px;
}
div.r2 a:hover
{background: url("optimizationalt.png");
background-repeat:no-repeat;
}
div.r3 a
{
position: absolute;
top:457px;
right:60px;
width: 400px;
height: 75px;
text-decoration:none;
padding-bottom: 20px;
background:url(packaging.png);
background-repeat:no-repeat;
}
div.r3 a:hover
{background: url("packagingalt.png");
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="one">
<a href="#" value="Branding" class="go" ></a>
</div>
<div class="two">
<a href="#" class="go"></a>
</div>
<div class="three">
<a href="#"class="go" ></a>
</div>
<div class="r1">
<a href="#"class="go" ></a>
</div>
<div class="r2">
<a href="#"class="go" ></a>
</div>
<div class="r3">
<a href="#"class="go" ></a>
</div>
</body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
$("a").click(function(event){
event.preventDefault(); // prevent the link from changing the location
$(this)
.closest("div") // select the parent div of the link
.siblings() // select all the siblings of the div
.hide("slow") // hide them
setTimeout(function() {
$(".go").animate({top: "0"}, "slow");},1200);
});
</script>
我试过 float 元素，使用表格技巧，使用溢出，但我似乎无法让它正常工作。
最佳答案
使用 position: absolute; 从页面流中移除元素，这样它们就不会“碰到”彼此。相反，如果你能弄清楚如何在没有它的情况下做到这一点，你就会得到想要的效果。也可以在页面上设置一个min-width，但不会造成垂直滚动，而是水平滚动。
关于jquery - 当页面缩小时，防止元素相互折叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8626474/