Html 当内容添加到页面时，Div会移动

在开始之前，以下是我整个html页面的代码：

<div align="center">
<img src="http://questers.x10.bz/Header.png" style="position: absolute; margin-left: -440px; box-shadow: 0px 3px 12px 2px #000;" class="rotate" />
</div>
<p></p> 
<div id="cssmenu">
<ul>
<li><a href='index.php'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='blog.php'>Blog</a></li>
<li><a href='#'>Wiki</a></li>
<li><a href='#'>Trivia</a></li>
<li><a href='admin/login.php'>Admins</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>

<div style="box-shadow: 0px 3px 12px 2px #000; background: #fff; margin-top: 320px; margin-left: 235px; position: absolute; padding: 10px; width: 655px; max-width: 655px;">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Create New Post</a></li>
<li><a href="#">Delete Post</a></li>
<li><a href="logout.php">Log Out</a></li>
<li><a href="#">Blog Home Page</a></li>
</ul>
<h3>Statics</h3>
<p>Total Blog Posts: 0</p>
<p>Total Blog Comments: 0</p>
</div>
</body>
</html>

这使站点页面看起来像这样：

但是，当您向站点添加更多内容（如另一个段落）时，它看起来是这样的（它会移动并更改宽度）：

---

关于如何防止这种情况的说明将不胜感激。

在容器周围放置一个具有固定位置和宽度的容器，然后将主机箱添加到该容器内

我有点想知道实际的问题是什么，所以如果你能进一步解释的话，对这个网站上的人会更有好处

集装箱代码：

#container{
  margin-right:auto;
  margin-left:auto;
  width:600px;
}

---

将它放在导航条形码之后，并包含所有正文内容，这样主要内容框就可以了。

我为您做了这些更改！我认为这是一个更好的html标记

*{
填充：0；
保证金：0；
}
身体{
背景图像：url（“http://images.virtualworldsland.com/blog/2322/796.jpg");
背景位置：中心；
背景重复：无重复；
背景尺寸：封面；
字体系列：提香网，无衬线；
}
.中心{
左侧填充：200px；
垫底：20px；
}
.形象{
边缘底部：20px；
}
.图像img{
显示：块；
最大宽度：100%；
高度：自动；
框大小：边框框；
盒影：0px 3px 12px 2px#000；
}
.轮换{
-webkit过渡：所有0.5s都可以轻松过渡；
-moz过渡：所有0.5s轻松；
-o型过渡：所有0.5s的轻松度；
}
.旋转：悬停{
-webkit变换：旋转（-7度）；
-moz变换：旋转（-7度）；
-o变换：旋转（-7度）；
}
#cssmenu，
#cssmenu ul，
#cssmenu ul li，
#cssmenu ul li a{
保证金：0；
填充：0；
边界：0；
列表样式：无；
线高：1；
显示：块；
位置：相对位置；
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
过渡：背景。5s轻松；
}
#cssmenu{
位置：绝对位置；
宽度：200px；
顶部：150px；
左：0；
高度：自动；
}
.集装箱{
填充：0 50px；
}
.包裹{
宽度：1070px；
保证金：0自动；
}
#cssmenu>ul>li>a{
填充：16px 22px；
光标：指针；
字体大小：16px；
文字装饰：无；
颜色：#ffffff；
背景：#3ab4a6；
}
#cssmenu>ul>li>a:悬停{
背景：#226c63；
过渡：背景。5s轻松；
}
#主机箱{
宽度：655px；
背景：#fff；
盒影：0px 3px 12px 2px#000；
填充：10px；
位置：绝对位置；
边缘顶部：320px；
左边距：235px；
}
.内容{
背景：#fff；
填充：20px；
框大小：边框框；
盒影：0px 3px 12px 2px#000；
背景：#fff；
宽度：655px；
最大宽度：655px；
}
.李国宝{
列表样式：无；
}

管理员-所有的事情罗布洛克斯
















静力学
日志总数：0

博客评论总数：0

博客评论总数：0

博客评论总数：0

问题是div会移动-如果你看我提供的屏幕截图，div的左上角会向右移动。是的，把所有东西都放在一个固定宽度的容器中，这样实际上，我有一个不同的想法。我假设所有的东西都在页面的中心？如果是，则使用左边距：自动；和右边距：自动；在CSS中。这将使分区居中。在这种情况下，创建一个容器，然后使用左边距：auto；--您是否计划在该内容框的右侧放置另一个内容框？我已经在那里放置了一个内容框，但我已将其删除，因为它可能是问题的原因。我试试你的建议。

#container{
  margin-right:auto;
  margin-left:auto;
  width:600px;
}