gpt4 book ai didi

html - 调整/放大/缩小页面时,div 会四处移动

转载 作者:行者123 更新时间:2023-11-28 10:53:07 25 4
gpt4 key购买 nike

我知道这个问题已被问过很多次,但我找到的解决方案都不适合我。我正在制作这个网站,当我放大和缩小网页时,div 元素会四处移动。这是 HTML 代码:

<!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 个声誉,但是当它缩小时盒子彼此远离。

我知道该网站不是一个真正好的网站,但这只是一个测试,因为当我放大时,其他任何网站都无法正常工作。请帮忙! (我确实尝试过包装器,但没有用)

最佳答案

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

关于html - 调整/放大/缩小页面时,div 会四处移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22723205/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com