html移动时调整浏览器 [英] html moving when resizing browser
本文介绍了html移动时调整浏览器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在调整浏览器大小时，我遇到了html移动部分的问题。
我试过所有的解决方案，但似乎没有什么工作。我是新的这个，所以也许做错了。非常感谢任何指导。
I'm having issues with parts of html moving when browsers is resized. I've tried all the solutions here but nothing seems to be working. I am new to this so maybe doing this wrong. Any guidance would be greatly appreciated!
这里是我的代码html和css
here is my code html and 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;
}
推荐答案
1360像素宽，您的几个图像是1360像素宽，或它们的组合是1360像素宽这是好的，如果你的目标观众可以支持，但一般来说，会有一些用户，这将是太宽。
You have a design that is 1360 px wide and several of your images are 1360 px wide, or combinations of them are 1360 px wide this is OK if your target audience can support that but generally there are going to be some users for which this is going to be too wide.
您可以对所有图片和图片组合使用float left。通常，当它们组合在一行上时，当显示宽度低于它们将占用的总宽度时，一些将开始下降到下一行。
You use float left for all your images and combinations of images. Typically when they are combined on a line some are going to start to drop onto the next line when your display width get below the total combined width that they would take up.
我已经删除了所有的脚本，并替换为一个坚实的背景颜色的图像，因为我没有你的任何图像。
I've stripped out all your script and replaced the images with a solid background colour because I don't have any of your images.
但是，这有效，不会动摇，应该给你一个从开始的地方，用于放回你的元素。
But this works and does not move about and should give you a place to start from, for putting back your elements.
<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中清除大量的重复，如下：
and then you can clean out a lot of repetition from your CSS like this:
.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;
}
这篇关于html移动时调整浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
