当我调整浏览器窗口大小时，我的中心 block 一直向左移动
正常:
调整浏览器窗口大小后:
所以我设法弄清楚如何在调整大小时保持导航和页脚相对不受干扰，但我似乎无法弄清楚如何处理正文，请帮忙？
HTML:
<html>
<head>
<title>Line After Line</title>
<link type = "text/css" rel = "stylesheet" href = "stylesheet.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id = "top">
<div id = "opening">
<a href = "index.html">
<h1 id = "logo"> Line After Line </h1>
</a>
</div>
<div id = "navi">
<ul>
<li> Read </li>
<li> Write</li>
<li> Review </li>
<li> Donate </li>
</ul>
</div>
</div>
<div id = "updates">
<h4>Updates</h4>
<ul>
<li> number one blah blah blah blah blah hahahahaahah </li>
</br>
<li>number two blah blah blah </li>
</ul>
</div>
<div id = "story">
<a href = "blockOne.html">
<div class = "storyblocks" id = "blockOne" >
<p> Hello I this is a test block </p>
</div>
</a>
<div class = "storyblocks" id = "blockTwo"></div>
<div class = "storyblocks" id = "blockThree"></div>
<div class = "storyblocks" id = "blockFour"></div>
<div class = "storyblocks" id = "blockFive"></div>
<div class = "storyblocks" id = "blockSix"></div>
</div>
<div id = "footer">
<ul>
<li> Home </li>
<li> A Message From Chung</li>
<li> Contributors </li>
<li> About </li>
<li> Contact </li>
</ul>
</div>
</body>
CSS:
*{
margin: 0px;
padding: 0px;
}
ul{
list-style-type: none;
}
body{
background-color: white;
}
body a {
text-decoration: none;
}
#top{
background-color: black; /*use to see div area*/
height:75px;
margin-bottom: 1.5%;
padding: 5px;
}
/*div surrounding the Logo */
#opening{
margin-left: 100px;
width: 300px;
}
#logo{
color: white;
font-family: verdana;
float:left;
margin-top: 15px;
}
#navi{
/*background-color: red;*/
width: 1100px;
left: 200px;
margin-top: 20px;
margin-right: 100px;
position: relative;
}
#navi ul li {
font-weight: bold;
color: white;
display: inline;
text-decoration: none;
font-family: Calibri;
font-size: 26px;
margin: 0px 60px 0px 60px;
}
#updates{
/*background-color: blue; /* use to see div area */
color: #6D8582 ;
font-family: verdana;
margin-left: 5%; /*100px*/
margin-bottom: 10px;
height: 600px;
width: 300px;
border-right: thick solid #6D8582;
float: left;
position: relative;
}
#updates h4 {
text-align: center;
padding: 10px;
}
#updates ul {
margin-left: 20px;
list-style-type: none;
}
#story , #mainStory{
/*border: thin solid black;*/
/*background-color: red;*/
float: right;
margin-left: 27%;
margin-bottom: 10px;
position: absolute;/* relative*/
width: 1145px;
height: 600px;
overflow: auto;
border-radius: 5px;
}
#mainStory {
background-color: #F7F9FA;
width: 1050px;
margin-right: 4.5%;
}
#mainStory p {
color: black;
font-family: Calibri;
font-size: 18px;
padding-left: 50px;
padding-right: 50px;
text-indent:50px;
}
#mainStory h2{
margin-top: 10px;
margin-bottom: 10px;
text-align: center;
}
.storyblocks{
color:black;
display:inline-block;
line-height: 50px;
margin: 5px;
width: 200px;
height: 200px;
border-radius: 5px;
text-align: center;
vertical-align: top;
opacity: 0.6;
}
#blockOne{
/*border: thick solid blue; /*delete later*/
background-color: #2A9BB5;
}
#blockTwo{
/*border: thick solid green; /*delete later*/
background-color: #17EB0C;
}
#blockThree{
/*border: thick solid yellow; /*delete later*/
background-color: #F0F035;
}
#blockFour{
/*border: thick solid red; /*delete later*/
background-color: #F02E4E;
}
#blockFive{
/*border: thick solid purple; /*delete later*/
background-color: #DA41E8;
}
#blockSix{
/*border: thick solid green; /*delete later*/
background-color: #FC62B2;
}
#footer {
background-color: black;
text-align:center;
position: absolute;
clear: left;
height:34px;
bottom: 0;
width:100%
}
#footer ul li {
color: white;
text-decoration: none;
display: inline;
font-family: Calibri;
font-size: 16px;
margin-left:50px;
margin-right:50px;
}
最佳答案
是因为你有一个固定的宽度和 float 权利。您的带有框的 div 试图与浏览器窗口的右侧保持对齐，并且因为您不会让它调整大小，所以它会移动。要么将宽度设为百分比，要么不向右浮动并留有 300px 的边距
关于javascript - 当我调整浏览器窗口大小时，中央 div 在网站周围移动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20037233/