Question

在开始之前，这是我整个页面的代码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>

这是CSS：

#mainbox {
     width: 655px;
     background: #fff;
     box-shadow: 0px 3px 12px 2px #000;
     padding: 10px;
     position: absolute;
     margin-top: 320px;
     margin-left: 235px;
    }

这使网站页面如下所示：

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

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

Answer 1

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

我有点难以看到实际问题是什么，所以如果你能进一步解释这对本网站上的人们更有利。

容器代码：

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

将其放在导航条代码之后，并包含其中的所有正文内容，以及主要内容框。

Answer 2

我为你做了这些改变！我认为这是一个更好的HTML标记。

＆＃13;

*{
  padding: 0;
  margin: 0;
}

body {
 background-image: url("http://images.virtualworldsland.com/blog/2322/796.jpg");
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
 font-family: Titillium Web, sans-serif;

}
.center {
  padding-left: 200px;
  padding-bottom: 20px;
}
.image {
  margin-bottom: 20px;
}
.image img {
  display: block;
  max-width: 100%;
  height: auto;
  box-sizing: border-box; 
  box-shadow: 0px 3px 12px 2px #000;
}
.rotate {
 -webkit-transition: all 0.5s ease-out; 
 -moz-transition: all 0.5s ease; 
 -o-transition: all 0.5s ease;
}

.rotate:hover {
 -webkit-transform: rotate(-7deg); 
 -moz-transform: rotate(-7deg); 
 -o-transform: rotate(-7deg); 
}

#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  transition: background .5s ease;
}
#cssmenu {
  position: absolute;
  width: 200px;
  top: 150px;
  left: 0;
  height: auto;
}
.container {
  padding: 0 50px;
}
.wrap {
  width: 1070px;
  margin: 0 auto;
}
#cssmenu > ul > li > a {
  padding: 16px 22px;
  cursor: pointer;
  font-size: 16px;
  text-decoration: none;
  color: #ffffff;
  background: #3ab4a6;
}

#cssmenu > ul > li > a:hover {
 background: #226c63;
 transition: background .5s ease;
}


#mainbox {
 width: 655px;
 background: #fff;
 box-shadow: 0px 3px 12px 2px #000;
 padding: 10px;
 position: absolute;
 margin-top: 320px;
 margin-left: 235px;
}
.content {
background: #fff;
padding: 20px;
box-sizing: border-box;
box-shadow: 0px 3px 12px 2px #000;
 background: #fff; 
 width: 655px; 
 max-width: 655px;
}
.content ul li {
  list-style: none;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="http://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet" type="text/css" />
<title>Admin - All Things Roblox</title>
</head>
<body>
<div class="center">
  <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 class="container">
     <div class="wrap">
      <div class="image">
        <img src="http://questers.x10.bz/Header.png" style="" class="rotate" />
      </div>
      <div class="content">
        <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>
        <p>Total Blog Comments: 0</p>
        <p>Total Blog Comments: 0</p>
      </div>
     </div>
  </div>
</div> 
</body>
</html>

＆＃13;

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

2 个答案: