调整大小/放大/缩小页面时，Div会移动(Divs move around when resizing/zooming

调整大小/放大/缩小页面时，Div会移动(Divs move around when resizing/zooming-in/out page)

我知道这个问题被问了很多次，但我找到的解决方案都没有给我工作。我有这个网站，当我放大和缩小网页时，div元素会移动。这是HTML代码：

<!doctype html> <html> <head>  <center> <img src="http://i1349.photobucket.com/albums/p742/lucasgame13/header_zps8f446598.png" alt="Shawn&LucasWeb"> </center>  <title>Shawn & Lucas Web Development!</title> <link rel="stylesheet" href="style.css"> </head> <body> <center> <h1>Welcome to Shawn & Lucas Web Development!</h1> </center>  <div id="leftbox"> <h3> Info </h3> <p>This is a test. -</p> <p>- <a href="Red.html">Click here!</a> </p> </div>   <div id="box"> <h3> Menu </h3> <p>Navigate around the website!</p> <center><a href="about.html">About Us</a> </center> </div>   <div id="rightbox"> <h3> Menu </h3> <p>Navigate around the website!</p> </div>  <footer> <p class="us"><font color="black"> Shawn & Lucas WEB - Custom Websites © </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个声望，但是当它缩小时，这些框彼此相距很远。

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

I know this question has been asked a fair amount of times, but none of the solutions I found worked for me. I have this website I am making, and the div elements move around when I zoom-in and zoom-out the webpage. Here is the HTML code:

<!doctype html> <html> <head>  <center> <img src="http://i1349.photobucket.com/albums/p742/lucasgame13/header_zps8f446598.png" alt="Shawn&LucasWeb"> </center>  <title>Shawn & Lucas Web Development!</title> <link rel="stylesheet" href="style.css"> </head> <body> <center> <h1>Welcome to Shawn & Lucas Web Development!</h1> </center>  <div id="leftbox"> <h3> Info </h3> <p>This is a test. -</p> <p>- <a href="Red.html">Click here!</a> </p> </div>   <div id="box"> <h3> Menu </h3> <p>Navigate around the website!</p> <center><a href="about.html">About Us</a> </center> </div>   <div id="rightbox"> <h3> Menu </h3> <p>Navigate around the website!</p> </div>  <footer> <p class="us"><font color="black"> Shawn & Lucas WEB - Custom Websites © </p> </footer> </body> </html>

And the CSS code is this:

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; }

I don't have a link because it is only on my computer, but I have screenshots:

http://prntscr.com/34ypmu - Here is the normal website at 100% zoom

http://prntscr.com/34yq9w - This is how it gets when zoomed in.

I can't post more than 2 links because I don't have 10 reputation, but when it is zoomed out the boxes go far away from each other.

I know the website isn't really a good website but it is just a test, because not any other website would work when I zoomed in. Please help! (I did try a wrapper but it didn't work)

最满意答案

如果使用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; }

If you add a wrapper around your boxes with text-align: center and add display: inline-block to the boxes they will align next to each other in the center.

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; }

更多推荐