2014-03-28 148 views
0

我知道這個問題已被問過相當多的時間,但是我找到的解決方案都沒有爲我工作。我有我製作的這個網站,當我放大和縮小網頁時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個聲望,但是當它被縮小時盒子彼此遠離。

我知道這個網站並不是一個很好的網站,但它只是一個測試,因爲當我放大時沒有任何其他網站可以工作。請幫忙! (我嘗試了一個包裝,但它不起作用)

+1

你不應該把圖像中的''標籤和''

標籤已經過時了。 – Mathias

+0

這很奇怪。我一直聽到有關事情突然崩潰的情況,但從來沒有遇到過這個問題...... – bjb568

+0

@ Mathias,我知道,這是我的朋友(我們一起製作網站)是誰做的,因爲我沒有改變它,因爲我沒有注意到它。我解決了這個問題,但它仍然無效。 – LucasGame13

回答

0

如果您在箱子周圍用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; 
} 
0

你錯用了絕對定位。經驗法則:你需要絕對定位嗎?

所以,使用浮動:

float: left; 
width: 33%; 

記住,讓寬度合適,因此不屬於下一行。如果你不希望打擾想填充/邊框,使用此:

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

它使得邊框寬度(而不只是內容)之內。

相關問題