HTML/CSS 个元素未随网页调整大小

Question

我最近很喜欢 HTML/CSS 并且一直在设计网页。我在这里和 Google 上搜索了几个小时，并从头开始完全重写了我的代码。这非常烦人。

我网页上的所有其他元素都会调整大小并重新定位以适合新的 window 大小，除了 about 元素，它与 [=28 位于同一位置=] 正在调整大小，就好像它已被赋予固定位置一样，但事实并非如此（至少我不这么认为）。你能看看我的代码并告诉我为什么会发生这种情况吗？

（请注意，出于隐私原因，所有信息均已删除。）

charset"utf-8";

#container{
width:900px;
}

#image{
position: relative;
padding-top:50px;
padding-right: 500px;
}

#title{
position: relative;
bottom: 275;
left: 250;
height: 100px;
width: 400px;
}

#margin{
margin-left:10;
}

#about{
position: relative;
bottom: 300;
left: 820;
height: 500px;
width: 350px;
border: 3px solid #FFFFFF;
} 

@font-face { 
    font-family: myFirstFont;
    src: url(font.ttf);
} 

#header { 
width: 900px;
height: 120px;
position: relative;
background-color: #787878;
border-bottom: 2px solid #000000;
font-family: myFirstFont;
} 

#footer { 
background-color: #FFD700;
height:20px;
left:0;
bottom:0;
position:absolute;
bottom:0;
width:100%;
} 

.button{text-decoration:none; text-align:center;
 padding:11px 32px;
 border:solid 1px #004F72;
 -webkit-border-radius:4px;
 -moz-border-radius:4px;
 border-radius: 4px;
 font:18px Arial, Helvetica, sans-serif;
 font-weight:bold;
 color:#E5FFFF;
 background-color:#3BA4C7;
 background-image: -moz-linear-gradient(top, #3BA4C7 0%, #1982A5 100%);
 background-image: -webkit-linear-gradient(top, #3BA4C7 0%, #1982A5 100%);
 background-image: -o-linear-gradient(top, #3BA4C7 0%, #1982A5 100%);
 background-image: -ms-linear-gradient(top, #3BA4C7 0% ,#1982A5 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1982A5', endColorstr='#1982A5',GradientType=0 );
 background-image: linear-gradient(top, #3BA4C7 0% ,#1982A5 100%);
 -webkit-box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
 -moz-box-shadow: 0px 0px 2px #bababa,  inset 0px 0px 1px #ffffff;
 box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;

  }.button:hover{
 padding:11px 32px;
 border:solid 1px #004F72;
 -webkit-border-radius:4px;
 -moz-border-radius:4px;
 border-radius: 4px;
 font:18px Arial, Helvetica, sans-serif;
 font-weight:bold;
 color:#E5FFFF;
 background-color:#3BA4C7;
 background-image: -moz-linear-gradient(top, #3BA4C7 0%, #1982A5 100%);
 background-image: -webkit-linear-gradient(top, #3BA4C7 0%, #1982A5 100%);
 background-image: -o-linear-gradient(top, #3BA4C7 0%, #1982A5 100%);
 background-image: -ms-linear-gradient(top, #3BA4C7 0% ,#1982A5 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1982A5', endColorstr='#1982A5',GradientType=0 );
 background-image: linear-gradient(top, #3BA4C7 0% ,#1982A5 100%);
 -webkit-box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
 -moz-box-shadow: 0px 0px 2px #bababa,  inset 0px 0px 1px #ffffff;
 box-shadow:0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
}

<html>
<head>
<title>Removed</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#800000">
<center>
<font color="#FFD700">
<div id="container">
<div id="header">
<font size="16">Removed</font>
<br><br>
<a href="#" class="button"/>Home</a>
<a href="#" class="button"/>About</a>
</div>
<div id="image"><img src="Removed" width="500"></div>
<div id="title"><h1>Welcome to My Website!</h1></div>
</center>
<div id="about"><p>About information removed.</p></div>
</font>
</div>
</body>
</html>

Answer 1

当我在 Safari 中查看它时，它移动了。可能是您在某些测量中缺少 px。另外，正如@RoToRa 在他的评论中提到的，您使用的是 really 旧的编码方法；如果你目前正在学习这个 - 找到一个更好的来源，因为那个对你弊大于利。

改变

#about{
    position: relative;
    bottom: 300; // missing the px
    left: 820;   // missing the px

至

#about{
    position: relative;
    bottom: 300px;
    left: 820px;

Answer 2

正如 Lister 先生所提到的，标记存在一些问题。但是，根据您的问题中提到的调整大小和定位，这里有一些地方可以开始...

HTML 标签

避免 HTML 中的内联样式。字体颜色之类的东西应该在 CSS 中完成，而不是在 HTML 标签中。查看 HTML5 documentation 以了解有关干净标记和样式的更多信息。

定位

你使用了包装器元素，这很好。子元素 - divs 和 relative 位置将保留在文档流中。要让元素调整大小，您必须使用可变宽度，而不是像素宽度。例如，您有：

#about {
  position: relative;
  width:350px;
  /* rest of code */
}

调整 window 大小时，#about 部分始终保持 350 像素的宽度。要调整大小，请使用等效的百分比值。因为你的容器是 900px，所以使用：

#about {
  position: relative;
  width: 38%;
  /* rest of code */
}

您还需要仔细检查并确保您的位置值包含 'px' 值。例如：

#title{
  position: relative;
  bottom: 275;
  left: 250;
}

...应该...

#title{
  position: relative;
  bottom: 275px;
  left: 250px;
}

最后，您的 #footer 有 absolute 位置，这使它脱离了文档流。

Answer 3

#about div 保持原样，因为它位于 #container 内部，它具有固定宽度并且缺少样式以使其在页面中居中。

如果您希望容器在调整浏览器宽度时保持在页面中央，请在左侧和右侧设置 #container 自动边距：

#container {
  width: 900px;
  margin: 0 auto;
  position: relative;
}

容器的 position: relative; 属性允许其子项绝对定位在容器内，如下所示：

#about {
  position: absolute;
  right: 0;
}

我制作了一个片段来演示这种方法并进行了许多其他改进。

@charset"utf-8";

body {
  background: #800000;
  color: #ffd700;
  font-family: 'Merriweather', serif;
}

#container {
  width: 900px;
  margin: 0 auto;
  position: relative;
}

#header {
  text-align: center;
}

.banner {
  text-align: center;
  font-size: 48px;
  padding: 10px 0;
}
.navigation {
  font-size: 18px;
}
.navigation a {
  text-decoration: none;
  font-family: 'Oswald', sans-serif;
  margin: 0 10px;
  padding: 5px 10px;
  color: #ffd700;
  border: 1px dotted #ffd700;
}
.navigation a:hover {
  background: #ffd700;
  color: #800000;
}

h1 {
  text-align: center;
  padding: 25px 0;
}

#content {
  position: absolute;
  left: 0;
}

#about {
  position: absolute;
  right: 0;
  width: 310px;
  height: 500px;
  padding: 0 20px;
  border: 3px solid #fff;
}

<link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet" type="text/css">

<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css">

<div id="container">

  <div id="header">

    <div class="banner"> Banner </div>

    <div class="navigation">
      <a href="#">Home</a>
      <a href="#"/>About</a>
    </div>

  </div><!--end header -->

  <h1> Welcome to My Website! </h1>

  <div id="content">
    <img src="https://upload.wikimedia.org/wikipedia/commons/9/96/Pebuildingtrojan.jpg" alt="liberty">
  </div>

  <div id="about">
    <p> Information about this website. </p>
  </div>

</div><!--end container -->

HTML/CSS 个元素未随网页调整大小

HTML/CSS elements not resizing with the web page

html

css

css-position