當頁面縮小時，保持元素不會相互摺疊

當前任何時候當您縮小頁面時，我的元素最終會相互移動，而不僅僅是導致頁面滾動。任何人都可以指向正確的方向嗎？當頁面縮小時，保持元素不會相互摺疊

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

我試着漂浮的元素，使用表技巧，使用溢出，但我似乎無法讓它正常工作。

來源

2011-12-24 matture

我不會回答這個問題，因爲我有點不確定，但是您對所有這些div都使用'position：absolute;'，所以當您縮小頁面時，畫布大小會發生變化。有些位於左側，右側是一些。如果你把所有東西都放在左邊，它應該可以工作...... – 2011-12-24 19:42:34

你有屏幕截圖嗎？您沒有發佈圖形，因此很難重現。我試圖在這裏重現您的頁面，但很難弄清楚您想要做什麼。 http://jsfiddle.net/RQ8QA/ – agarcian 2011-12-24 19:43:14

定位一切從左邊的工作很好，非常感謝時間！ – matture 2011-12-24 19:45:29

使用position: absolute;從頁面流中移除元素，以便它們不會互相碰撞。相反，如果你能想出如何做到這一點，你會得到理想的效果。您也可以在頁面上設置min-width，但不會導致垂直滾動，而是水平滾動。

來源

2011-12-24 19:41:06 Ktash

這是很難說，但它似乎是你有問題，你絕對定位...

看看這個頁面http://jsfiddle.net/RQ8QA/1/

請注意，我改變了一切從位置：絕對給位置：相對的。

來源

2011-12-24 19:47:00 agarcian

就我所見，顯而易見的解決方案是將所有元素封裝在一個固定寬度的容器中，當瀏覽器縮小時不會重新調整大小。

如果你想保持一個可變寬度，我發現自己最近使用的一個解決方案是使所有元素內聯（或內嵌塊），將它們放在一起，然後將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如果你想讓他們正常的行爲。

來源

2011-12-24 20:21:11 Wex

當頁面縮小時，保持元素不會相互摺疊

回答

相關問題