Question

我是HTML和CSS的菜鸟。我已经创建了我认为相当不错的网页。但是，我使用相同的笔记本电脑制作了整个页面，因此当我在另一台计算机上查看时，整个布局都不同。当我放大或缩小页面时，它会改变我的div的位置，所以如果缩放不完美，那么我的网页看起来很荒谬。

这是我的HTML：

<html>

<head>
<link rel="stylesheet" href="stylesheet.css"/>

<title> Gordon's News </title>

</head>

<header>

<h1 class="top"><a href="index.html"> Gordon's News </a> </h1>
<h3>Gordon's News </h3>

</header>


<body> 

<div class="wrapper">


<h2 id="bodybuilding">THE TESTOSTERONE FUELLED  BODYBUILDING</h2>


<article class="ben">


<figure>

<img class="lats" src="lat.jpg" alt="front lateral spread pose" 
<img class="bicep" src= "bicep.jpg" alt="bicep" height="150" width="100">
</figure>

<p>Every morning he wakes up, ....

(I wont bore you will the whole article)

</article>

</div>


<nav class="links">

<h4 id="more">More stories</strong></h6>
<ul>
<li><a href="http://news.sky.com/story/1101193/steroids-put... </a></li>
<li><a href="http://www.nytimes.com/2013/03/17/business... </a></li>
</ul>

</nav>


 <Aside class= "sidebar1">

it's a <ul> basically

</aside>


<footer>
<p><strong> <a href="index.html">Home </a></strong> </P>
</footer>

</body>

</html>

我的CSS：

body {
background-image: url("glass.jpg");
width:100%;
}

h1 {
position:absolute;
top:4px;
left: 450px;
color: #e41b17;
font-size: 34pt;
font-family: Impact, Arial, helvetica, sans-serif;
width: 580;
z-index: 90;
text-shadow: 1px 2px 2px black;
font-size:50pt;
}

h3 {
position:relative;
top:18px;
left: 490px;
color: black;
font-size: 34pt;
font-family: Impact, Arial, helvetica, sans-serif;
width: 580;
z-index: 70;
font-size:40pt;
text-shadow: 1px 1px 2px red;
}

article.ben {
text-indent: 20px;
text-align:justify;
letter-spacing: 2px;
font-family: arial, verdana, sans-serif;
font-weight: bold;
font-size:17px;
}

#bodybuilding{
padding: 20px 20px 20px 20px;
background: #3b5998; 
color: white;
font-size: 34pt;
font-family: Impact, Arial, helvetica, sans-serif;
width: 580;
border:groove;
text-shadow: 1px 1px 2px black;
padding-left: 10px;
margin: 0 0 0.6em;
border-radius: 15px;
}

#bodybuilding span {
color:#e41b17;
}

img.lats {
float:left;
border: groove;
border-width: 5px;
padding: 8px;
}

img.bicep {
position:absolute;
top:143px;
right:300px;
float:left;
border: groove;
border-width: 5px;
}

.wrapper {
width:800px;
height:1950px;
padding:5px;
background-color:#EDEFF4;
box-shadow: 0 0 5px 5px #888;
border-radius: 15px;
margin: 0 auto;
} 


aside.sidebar1 {
position: Absolute;
Top:300px;
Right:70px;
width:180px;
background-color:white;
box-shadow: 0 0 5px 5px #888;
border-radius: 15px;
text-align:center;
font-size: 16pt;
font-family:Arial, helvetica, sans-serif;
text-transform:capitalize;
}

H4 {
font-size: 22pt;
font-family: Impact, Arial, helvetica, sans-serif;
color: #e41b17
}


.links {
margin:0 auto;
width:150px;
height:200px;
padding:5px;
background-color:#EDEFF4;
box-shadow: 0 0 5px 5px #888;
border-radius: 15px;
position:absolute;
top:1600px; 
left:90px;
text-align:center;
text-color:black;
}

#more {
font-size:20px;
text-align:center;
color:  #e41b17;
} 

#mm {
text-decoration:none;
color:black;
}

footer {
margin:15px;
width:800px;
padding:5px;
background-color:#EDEFF4;
box-shadow: 0 0 5px 5px #888;
border-radius: 15px;
text-align:center;
position:absolute;
right:253;
}

我真的不明白为什么他们在缩放时会移动。有人可以帮忙吗？

非常感谢您的时间。非常感激。

Answer 1

我发现你正在使用以下属性：

position:absolute;
top;
left;
right;
float;

许多具有这些属性的元素没有父容器或者没有父容器，那么他的父元素就是页面的整个主体。当您处理值到位置时，您需要小心相关对象以使位置起作用。

现在，如果你有一个与身体相关的绝对位置，如：

left:100px;

无论分辨率屏幕或大小窗口如何，元素总是在身体的100 px处。

您可能需要详细查看代码并设置相对父母，并牢记真正的固定结构，以使其稳固。

如何在放大或缩小页面时阻止DIVS移动？

1 个答案: