我正在使用HTML和CSS建立一个网站。
我有一个与缩放有关的小问题。当页面缩小时，大多数元素都会混乱并且不合适。
使用的浏览器：
在27英寸屏幕上从Safari浏览时，情况变得更糟。
的index.html
<html xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>Arrow-TvSeries - Home</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta property="fb:admins" content="{793705343}"/>
</head>
<body>
<center>
<table>
<tr>
<td align="center">
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=80504353315";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
// init the FB JS SDK
FB.init({
appId : '793705343', // App ID from the app dashboard
channelUrl : '//www.arrow-tvseries.com/channel.html', // Channel file for x-domain comms
status : true, // Check Facebook Login status
xfbml : true // Look for social plugins on the page
cookie : true, // enable cookies to allow the server to access the session
oauth : true // enable OAuth 2.0
});
// Additional initialization code such as adding Event Listeners goes here
};
// Load the SDK asyncchronously
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:fb="http://www.facebook.com/2008/fbml"
xmlns:f="http://java.sun.com/jsf/core">
<!--website-->
<div id="hood_image">
<br/><br/><br/></br></br></br><img src="images/oli_arrow4.png" align="right"/>
</div>
<div id="sitewrapper">
<div id="header"></div>
<div id="line"></div>
<div id="menu">
<br><a href="index.html">Home</a> | <a href="cast.html">Cast</a> | <a href="episodes.html">Episodes</a>
</div>
<!--content-->
<div id="content">
<div id="episodecontent">
<table border="0">
<tr>
<td>
<img id="episodeimg" src="images/Next-Episode.png"/>
</td>
<td>
<p style="color: white"><b>Title:</b> Home Invasion<br/><b>Date:</b> 24th April 2013</p>
</td>
</tr>
</table>
</div>
<div id="division1">
<p>After a violent shipwreck, billionaire playboy Oliver Queen was
missing and presumed dead for five years before being discovered
alive on a remote island in the Pacific. When he returns home to
Starling City, his devoted mother Moira, much-beloved sister Thea,
and best friend Tommy welcome him home, but they sense Oliver has
been changed by his ordeal on the island. While Oliver hides the
truth about the man he's become, he desperately wants to make amends
for the actions he took as the boy he was. Most particularly, he
seeks reconciliation with his former girlfriend, Laurel Lance.</p><br/>
<p>As Oliver reconnects with those closest to him, he secretly creates
the persona of Arrow a vigilante to right the wrongs of his family,
fight the ills of society and restore Starling City to its former glory.
By day, Oliver plays the role of a wealthy, carefree and careless
philanderer he used to be - flanked by his devoted chauffeur/bodyguard,
John Diggle - while carefully concealing the secret identity he turns
to under the cover of darkness. However, Laurel's father, Detective
Quentin Lance, is determined to arrest the vigilante operating in his
city. Meanwhile, Oliver's own mother, Moira, knows much more about the
deadly shipwreck than she has let on and is more ruthless than he
could ever imagine.</p><br/>
<p style="font-size: 20px"><b>I n t r o d u c t i o n</b></p><br/>
<p>At the beginning of each episode, with the exception of "Pilot", the
first episode of the series, a voiceover of Oliver Queen describes
briefly the hardships that Oliver faced on Lian Yu. He states that
as he returned, he set out to fulfill his father's dying wish.</p><br/>
<p>"My name is Oliver Queen. For five years I was stranded on an
island with only one goal: survive. Now I will fulfill my father's
dying wish. To use the list of names he left me and bring down those
who are poisoning my city. To do this, I must become someone else.
I must become... something else."</p>
<div id="video" align="middle">
<iframe width="640" height="360"
src="http://www.youtube.com/embed/xZrFSsc6CpI?autoplay=1"
frameborder="1" allowfullscreen>
</iframe>
<!--?autoplay=1-->
</div>
<div>
<script type="text/javascript"><!--
google_ad_client = "ca-pub-8938167182852335";
/* Home paga bottom */
google_ad_slot = "9919170802";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<div style="float: right; font-size: 9px;">
<p><br/><br/>Most of the information about this Tv-Show is taken from <a href="http://http://www.imdb.com/title/tt2193021/?ref_=sr_1" target="new">IMDB.COM</a></p>
</div>
</div>
<div id="division2">
<div class="fb-comments" data-href="http://www.arrow-tvseries.com" data-width="200"
data-num-posts="10" data-colorscheme="dark">
</div>
<div class="fb-like" data-href="http://www.arrow-tvseries.com" data-send="false"
data-width="220" data-show-faces="true" data-font="arial">
</div><br/>
<div><br/>
<p><b>You may also like:</b></p>
</div>
<div>
<script type="text/javascript"><!--
google_ad_client = "ca-pub-8938167182852335";
/* First Ad */
google_ad_slot = "7105305203";
google_ad_width = 120;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<div>
<br/><br/><a href="http://www.imdb.com"><img src="images/imdb.png" alt="IMDB" width="100" /></a>
</div>
</div>
</div>
</div>
</td>
</tr>
</table>
</center>
</body>
的style.css
a:link {color:#fff;} /* unvisited link */
a:visited {color:#fff;} /* visited link */
a:hover {color:#2e6402;} /* mouse over link */
a:active {color:#fff;} /* selected link */
#table{
padding-top: 30px;
padding-bottom: 30px;
z-index: 100;
}
#header{
background-position: center;
position: relative;
background-image:url('images/logo_bg.png');
background-repeat:no-repeat;
border-radius: 25px;
height: 331px;
width: 1300px;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
z-index: -3;
/*border:2px solid;*/
display:block;
margin: 0 auto 0 auto;
}
#line{
width: 1290px;
height: auto;
background-color: white;
padding-top: 1px;
margin: 0 auto 0 auto;
}
body{
background-color: black;
}
#sitewrapper{
width: 1300px;
height: 100%;
padding-left: 0px;
padding-top: 3px;
padding-right: auto;
margin: 0 auto 0 auto;
}
p{
text-align: justify;
font-family: arial;
padding-left: 0px;
margin: 0 auto 0 auto;
color: white;
}
p2{
text-align: justify;
font-family: arial;
padding-left: 0px;
color: green;
margin: 0 auto 0 auto;
}
#menu{
width: 1250px;
height: auto;
color: white;
padding-top: 0px;
padding-right: 100px;
padding-bottom: 0px;
font-size: 120%;
/*border:2px solid;*/
text-align: right;
font-family: arial;
z-index: 31;
position: relative;
margin: 0 auto 0 auto;
}
#episodeimg{
width: 250px;
float: left;
padding-top:0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 10px;
margin: 0 auto 0 auto;
}
#episodecontent{
width: 55%;
float: auto;
margin: 0 auto 0 auto;
}
#hood_image{
float: left;
width: 30%;
height: auto;
position: fixed;
z-index: 1;
padding-left: 0px;
}
#content{
float: right;
width: 85%;
position: absolute;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
z-index: 5;
margin: 0 auto 0 auto;
/*border:2px solid;*/
}
#division1{
position: relative;
float: left;
height: 100%;
width: 700px;
color: white;
padding-top: 30px;
padding-left: 20%;
padding-right: 0px;
padding-bottom: 10px;
z-index: 30;
margin: 0 auto 0 auto;
/*border:2px solid;*/
}
#division2{
float: right;
height: 100%;
width: 20%;
/*padding-top: 0px;
padding-left: 0px;
padding-right: 0px;*/
color: white;
border:2px solid;
margin: 0 auto 0 auto;
z-index: 1000;
overflow: hidden;
position: relative;
}
#video{
padding-top: 50px;
padding-left: 0%;
padding-right: 0%;
padding-bottom: 100px;
/*border:2px solid;*/
}
#footer{
/*background-color: red;*/
height: 10px;
width: 100%;
color: black;
background-color: white;
display:block;
}
指向此网站的链接：
www.arrow-tvseries.com
答案 0 :(得分：1)
这里有一些事情要考虑。 #sitewrapper需要position:relative，因为您希望将#content定位为绝对位置，以使其相对于其父元素而非文档。这会稍微改变您的布局。
下一部分就是在width: 85%上使用#content。这限制并推动了Facebook整合。考虑将其设置为100％。这将使facebook框浮动到文本的右侧。
布局和定位元素有许多不同的方法，这可能不是最佳解决方案，这些更改应该使它在缩放时不会移动（在chrome中测试）。
您可能还需要考虑其他一些事项。尝试在http://jigsaw.w3.org/css-validator/验证css，它会指出一些错误。