当调整大小/放大/缩小页面时，Div可以左右移动

我知道这个问题已被问过相当多的时间，但是我找到的解决方案都没有为我工作。我有我制作的这个网站，当我放大和缩小网页时div元素会四处移动。下面是HTML代码：当调整大小/放大/缩小页面时，Div可以左右移动

<!doctype html> 
<html>  
    <head> 
     <!-- Header --> 
     <center> 
      <img src="http://i1349.photobucket.com/albums/p742/lucasgame13/header_zps8f446598.png" alt="Shawn&amp;LucasWeb"> 
     </center> 
     <!-- Header --> 
     <title>Shawn & Lucas Web Development!</title> 
     <link rel="stylesheet" href="style.css"> 
    </head>  
    <body> 
     <center> 
      <h1>Welcome to Shawn & Lucas Web Development!</h1> 
     </center> 
     <!-- Left Box --> 
     <div id="leftbox"> 
      <h3> Info </h3> 

      <p>This is a test. -</p> 
      <p>- <a href="Red.html">Click here!</a> 
      </p> 
     </div> 
     <!-- End of Left Box --> 
     <!-- Middle Box --> 
     <div id="box"> 
      <h3> Menu </h3> 

      <p>Navigate around the website!</p> 
      <center><a href="about.html">About Us</a> 
      </center> 
     </div> 
     <!-- End of Middle Box --> 
     <!-- Right Box --> 
     <div id="rightbox"> 
      <h3> Menu </h3> 

      <p>Navigate around the website!</p> 
     </div> 
     <!-- End of Right Box --> 
     <footer> 
      <p class="us"><font color="black"> Shawn & Lucas WEB - Custom Websites &copy; </p> 
     </footer> 
    </body> 
</html>

而且CSS代码是这样的：

body { 
    background:#61c9f5; 
} 
h1 { 
    color:#000000; 
    font-family:"Impress BT" arial verdana; 
    position:relative; 
    bottom:37px; 
}  
p.us { 
    tetx-align:center; 
    color:white; 
    font:bold 400% 
} 

/* Middle Box */ 
#box { 
    border-width: 0.139in; 
    border-color: rgb(75, 75, 75); 
    border-style: dashed; 
    background-color: rgb(115, 115, 115); 
    width: 309px; 
    height: 296px; 
    z-index: 1; 
    display:block; 
    margin: auto auto;  
}  
#box h3 { 
    font-size:180%; 
    text-align:center; 
    position:relative; 
    bottom:30px;   
}  
#box p { 
    position:relative; 
    bottom:60px; 
    text-align:center;  
}  
#box a:link, a:visited { 
    display:block; 
    font-weight:bold; 
    color:#FFFFFF; 
    background-color:#778899; 
    width:120px; 
    text-align:center; 
    padding:4px; 
    text-decoration:none; 
    text-align:center; 
    border:1px solid black; 
}  
#box a:hover, a:active { 
    background-color:#708090 
} 

/* End of Middle Box */ 

/* Left Box */ 
#leftbox { 
    border-width: 0.139in; 
    border-color: rgb(75, 75, 75); 
    border-style: dashed; 
    background-color: rgb(115, 115, 115); 
    width: 309px; 
    height: 296px; 
    z-index: 1; 
    position:absolute; 
    left:70px 
} 
#leftbox h3 { 
    font-size:180%; 
    text-align:center; 
    position:relative; 
    bottom:30px; 
} 
#leftbox p { 
    position:relative; 
    bottom:60px; 
    text-align:center; 
} 
/* End of Left Box */ 

/* Right Box */ 
#rightbox { 
    border-width: 0.139in; 
    border-color: rgb(75, 75, 75); 
    border-style: dashed; 
    background-color: rgb(115, 115, 115); 
    width: 309px; 
    height: 296px; 
    z-index: 1; 
    position:absolute; 
    top:395px; 
    right:70px;  
} 
/* End of Right Box */ 

div {      
    border-radius:10px; 
}

我没有一个链接，因为这只是我的电脑上，但我有截图：

http://prntscr.com/34ypmu - 这是正常的网站以100％的缩放

http://prntscr.com/34yq9w - 这是它如何被放大时

我不能发布2个以上的链接，因为我没有10个声望，但是当它被缩小时盒子彼此远离。

我知道这个网站并不是一个很好的网站，但它只是一个测试，因为当我放大时没有任何其他网站可以工作。请帮忙！（我尝试了一个包装，但它不起作用）

来源

2014-03-28 LucasGame13

你不应该把图像中的''标签和''

标签已经过时了。 – Mathias

这很奇怪。我一直听到有关事情突然崩溃的情况，但从来没有遇到过这个问题...... – bjb568

@ Mathias，我知道，这是我的朋友（我们一起制作网站）是谁做的，因为我没有改变它，因为我没有注意到它。我解决了这个问题，但它仍然无效。 – LucasGame13

如果您在箱子周围用text-align: center添加包装并将display: inline-block添加到箱子中，它们将在中心彼此相邻排列。

http://jsfiddle.net/borglinm/JFkYL/

HTML

<div class="boxes"> 
    <div class="box">Content</div> 
    <div class="box">Content</div> 
    <div class="box">Content</div> 
</div>

CSS

.boxes { 
    text-align: center; 
} 
/* All the boxes */ 
.box { 
    vertical-align: top; 
    margin: 0 10px; 
    text-align: left; 
    display: inline-block; 
}

来源

2014-03-29 09:29:45 Mathias

你错用了绝对定位。经验法则：你需要绝对定位吗？

号

所以，使用浮动：

float: left; 
width: 33%;

记住，让宽度合适，因此不属于下一行。如果你不希望打扰想填充/边框，使用此：

box-sizing: border-box; 
-moz-box-sizing: border-box;

它使得边框宽度（而不只是内容）之内。

来源

2014-03-28 22:59:14 bjb568

当调整大小/放大/缩小页面时，Div可以左右移动

回答

相关问题