Question

目前，只要你缩小页面，我的元素最终会相互移动，而不仅仅是让页面滚动..有人能指出我正确的方向吗？

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

我已经尝试使用表格技巧浮动元素，使用溢出，但我似乎无法让它正常工作。

Answer 1

使用position: absolute;会从页面流中删除元素，这样他们就不会遇到问题。彼此。相反，如果你能在没有它的情况下弄清楚如何做到这一点，你将获得所需的效果。您还可以在页面上设置min-width，但不会导致垂直滚动而是水平。

Answer 2

很难说，但你的绝对定位似乎有问题......

请查看此页面http://jsfiddle.net/RQ8QA/1/

请注意，我将所有内容从position：absolute更改为position：relative。

Answer 3

据我所知，明显的解决方案是将所有元素都包装在一个固定宽度的容器中，当浏览器缩小时，它不会调整大小。

如果你想保持一个可变宽度，我发现自己最近使用的解决方案是将所有元素内联（或内联块），将它们放在一起，然后将white-space: nowrap添加到其容器中。

<div id="container">
    <div class="elem-1">
        ...
    </div><div class="elem-2">
        ...
    </div><div class="elem-3">
        ...
    </div><div class="elem-4">
        ...
    </div>
</div>

请注意，后续元素正在触及：</div><div class="elem。这不是拼写错误;删除标记中的空格可以使内联元素在显示时保持触摸。

CSS：

#container { white-space: nowrap; }
#container > div { 
    white-space: normal;
    display: inline-block; }

请注意，如果您希望它们正常运行，则需要在每个内部元素中设置white-space: normal。

当页面缩小时，保持元素不会相互折叠

3 个答案: