在调整浏览器大小时移动html时出现的问题

当浏览器调整大小时，出现部分html移动问题。我试过这里的所有解决方案，但似乎没有工作。我对此很陌生，所以也许做错了。任何指导将不胜感激！在调整浏览器大小时移动html时出现的问题

这里是我的代码的html和css

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>PUMPED|Building Your Best You</title> 
<link href="master.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript"> 
function MM_preloadImages() { //v3.0 
    var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); 
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) 
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} 
} 

function MM_swapImgRestore() { //v3.0 
    var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; 
} 

function MM_findObj(n, d) { //v4.01 
    var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { 
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} 
    if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; 
    for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); 
    if(!x && d.getElementById) x=d.getElementById(n); return x; 
} 

function MM_swapImage() { //v3.0 
    var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) 
    if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} 
} 
</script> 
</head> 
<body onload="MM_preloadImages('images/home3_over.png','images/home8_over.png','images/home12_over.png')"> 
<div id="home1"></div> 
<div id="home2"></div> 
<div id="home3"> <a href="http://gum.co/Pumped" target="_blank"><img src="images/home3.png" width="262" height="63" id="Image1" onmouseover="MM_swapImage('Image1','','images/home3_over.png',1)" onmouseout="MM_swapImgRestore()" /></a></div> 
<div id="home4"></div> 
<div id="home5"></div> 
<div id="home6"></div> 
<div id="house7"> <a href="https://gumroad.com/l/Pumped" target="_blank"><img src="images/home7.png" width="202" height="64" id="Image2" onmouseover="MM_swapImage('Image2','','images/home8_over.png',1)" onmouseout="MM_swapImgRestore()" /></a></div> 
<div id="home8"></div> 
<div id="home9"></div> 
<div id="home10"></div> 
<div id="home11"> <a href="https://gumroad.com/l/Pumped" target="_blank"><img src="images/home11.png" width="262" height="64" id="Image3" onmouseover="MM_swapImage('Image3','','images/home12_over.png',1)" onmouseout="MM_swapImgRestore()" /></a></div> 
<div id="home12"></div> 
<div id="home13"></div> 
<div id="container"> 
</div> 
</body> 
</html>

CSS

@charset "UTF-8"; 
#container { 
    float: left; 
    height: 500px; 
    width: 1360; 
    margin-right: auto; 
    margin-left: auto; 
} 
#wrapper { 
    margin-left: auto; 
    margin-right: auto; 
    min-width:960px; 
} 
#home1 { 
    background-image: url(images/home1.png); 
    margin: 0px; 
    padding: 0px; 
    float: left; 
    height: 420px; 
    width: 1360px; 
} 
#home2 { 
    background-image: url(images/home2.png); 
    margin: 0px; 
    padding: 0px; 
    float: left; 
    height: 63px; 
    width: 548px; 
} 
#home3 { 
    background-image: url(images/home3.png); 
    margin: 0px; 
    padding: 0px; 
    float: left; 
    height: 63px; 
    width: 262px; 
} 
#home4 { 
    background-image: url(images/home4.png); 
    margin: 0px; 
    padding: 0px; 
    float: left; 
    height: 63px; 
    width: 550px; 
} 
#home5 { 
    background-image: url(images/home5.png); 
    margin: 0px; 
    padding: 0px; 
    float: left; 
    height: 492px; 
    width: 1360px; 
} 
#home6 { 
    background-image: url(images/home6.png); 
    margin: 0px; 
    padding: 0px; 
    float: left; 
    height: 64px; 
    width: 560px; 
} 
#house7 { 
    background-image: url(images/home7.png); 
    margin: 0px; 
    padding: 0px; 
    float: left; 
    height: 64px; 
    width: 202px; 
} 
#home8 { 
    background-image: url(images/home8.png); 
    margin: 0px; 
    padding: 0px; 
    float: left; 
    height: 64px; 
    width: 598px; 
} 
#home9 { 
    background-image: url(images/home9.png); 
    margin: 0px; 
    padding: 0px; 
    float: left; 
    height: 1549px; 
    width: 1360px; 
} 
#home10 { 
    background-image: url(images/home10.png); 
    margin: 0px; 
    padding: 0px; 
    float: none; 
    height: 64px; 
    width: 860px; 
} 
#home11 { 
    background-image: url(images/home11.png); 
    margin: 0px; 
    padding: 0px; 
    float: left; 
    height: 64px; 
    width: 262px; 
} 
#home12 { 
    background-image: url(images/home12.png); 
    margin: 0px; 
    padding: 0px; 
    float: left; 
    height: 64px; 
    width: 238px; 
} 
#home13 { 
    background-image: url(images/home13.png); 
    margin: 0px; 
    padding: 0px; 
    float: left; 
    height: 128px; 
    width: 1360px; 
}

来源

2013-10-29 user2930923

回答 - 学习CSS定位 –

真的吗？你粘贴你的网站的整个HTML，然后你会回来30分钟后寻找一个神奇的解决方案？ – MarsOne

[元素移动时浏览器调整大小]的可能重复]（http://stackoverflow.com/questions/14386048/elements-move-when-browser-is-resized） – adil

肯定会发生这种事，因为你的CSS是很好的默认浏览器视图仅但是当u调整它的大小也不会好。你可以在谷歌搜索“自动检测UA的脚本”。然后你必须针对不同的屏幕尺寸制作不同的2 CSS。

来源

2013-10-29 06:54:38 Mrigank

您有一个1360像素宽的设计，您的几张图像是1360像素宽，或者它们的组合是1360像素宽这是好的，如果您的目标受众可以支持，但通常会有一些用户对此，这将会过于宽泛。

对所有图像和图像组合使用float left。通常情况下，当他们在一条线上组合时，当您的显示宽度低于他们将占用的总组合宽度时，一些将开始落到下一行。

我已经删除了所有脚本，并用纯色背景替换了图像，因为我没有任何图像。

但是这个工作，并没有动议，应该给你一个地方开始，为了放回你的元素。

<body> 
    <div class="images"> 
    <div class="row row1 full"> 
     <div id="home1"></div> 
    </div> 
    <div class="row narrow-strip"> 
     <div id="home2"></div> 
     <div id="home3"></div> 
     <div id="home4"></div> 
    </div> 
    <div class="row row3 full"> 
     <div id="home5"></div> 
    </div> 
    <div class="row narrow-strip"> 
     <div id="home6"></div> 
     <div id="home7"></div> 
     <div id="home8"></div> 
    </div> 
    <div class="row row5 full"> 
     <div id="home9"></div> 
    </div> 
    <div class="row narrow-strip"> 
     <div id="home10"></div> 
     <div id="home11"></div> 
     <div id="home12"></div> 
    </div> 
    <div class="row row7 full"> 
     <div id="home13"></div>  
    </div> 
    </div> 
</body>

，然后你可以从你的CSS这样清理掉大量的重复：

.images { 
    margin: auto auto; 
    width: 1360; 
} 
.images div { 
    padding:0; 
    margin:0; 
} 
.images .row { 
    width:1360px; 
} 
.images .row div { 
    float:left; 
    display:inline-block; 
    height:100%; 
} 
.images .row.full div { 
    width:100%; 
} 
.images .row.narrow-strip { 
    height:63px; 
} 
.images .row1 { 
    height:420px; 
} 
.images .row3 { 
    height:492px; 
} 
.images .row5 { 
    height:1549px; 
} 
.images .row7 { 
    height:128px; 
} 
#home1 { 
    background-color:#EEE; 
    height: 420px; 
} 
#home2 { 
    background-color:#DDD; 
    width: 548px; 
} 
#home3 { 
    background-color:#CCC; 
    width: 262px; 
} 
#home4 { 
    background-color:#BBB; 
    width: 550px; 
} 
#home5 { 
    background-color:#AAA; 
    height: 492px; 
}  
#home6 { 
    background-color:#999; 
    width:560px; 
}  
#home7 { 
    background-color:#888; 
    width:202px; 
}  
#home8 { 
    background-color:#777; 
    width:598px; 
}  
#home9 { 
    background-color:#666; 
    height: 1549px; 
}  
#home10 { 
    background-color:#777; 
    width:860px; 
}  
#home11 { 
    background-color:#444; 
    width:262px; 
}  
#home12 { 
    background-color:#333; 
    width:238px; 
}  
#home13 { 
    background-color:#222; 
    height: 128px; 
}

来源

2013-10-29 07:45:32

非常感谢您的帮助，但我是仍然有麻烦，没有什么似乎排队正确我不确定我做错了什么，我对此很新。我做了所有上述改变，似乎我做错了什么。我已将容器和图像的宽度更改为960像素，并调整了所有其他尺寸，所有内容似乎都加起来，但在实时视图中不能正确显示。 – user2930923

查看更新后的版面dstyle –

接受答案，如果有帮助。 – adil

在调整浏览器大小时移动html时出现的问题

回答

相关问题