html - 我怎样才能让我的 div 内容停止超出我的其他 div

Question

好的，我是新手。我只做了几个月。

我正在尝试为我的学校制作一个网页。

我遇到了一个问题，我有不同的 div 容器来保存我的网站。

我有我的.BodyBackground(保存我的背景图片)

在那个 div 里面我有其余的:

我有 .allContent(它包含网页 0 的其余部分)

在那个 div 中，我有 .LeftGroup、.MiddleGroup 和 .RightGroup。 3 个不同的 div，用于保存不同样式的文本/信息。

在底部我有我的.footer div。

现在!他们都在正确的地方。

但是 .LeftGroup 和 .RightGroup 超出了它们所在的 div。

.MiddleGroup 在它到达 .LeftGroup div 的位置缩进。

我花了几个小时尝试不同的事情来解决这个问题，但没有成功。 有人可以帮帮我吗..

站点代码应该没什么大不了的，我在样式表中解释了代码的含义。

这是 CSS(样式)代码...(这是我的第一次，希望它正确显示)

 .BodyBackground      {
               background-image: url ('../Pictures/Background.jpg');
           background-repeat: no-repeat;
           padding-top: 1%;
           padding-bottom: 1%;
           padding-left: 17%;
           padding-right: 17%;
           position: fixed;
           top: 0;
           left: 0;
           right: 0;
           bottom: 0;
           -webkit-background-size: cover;
           -moz-background-size: cover;
           background-size: cover;
           background-position:center center;
           z-index: 0;
           overflow: auto;
           height: 100%;                                           }

  .AllContent      {
               background-image: url('../Pictures/BackgroundFour.png'); 
           background-repeat: no-repeat;
           position: center;
           -webkit-background-size: cover;
           -moz-background-size: cover;
           background-size: cover;
           background-position:center center;
           box-sizing: border-box;
           width: auto;
           height: auto;
           padding: 20px;
           border-style: solid;
               border-color: orange;
           }

   .headerOne      {
        background-image: url('../Pictures/Background.jpg');
           box-sizing: border-box;
           width: 100%;
           padding: 10px;
           height: 200px;
           box-shadow: 5px 5px 5px #333333;
           }

 .headerTwo        {                        
           font-family: Verdana, Arial, sans-serif; 
           box-sizing: border-box;
           width: 375px;
           height: 70px;
           padding: 0px;
           overflow: hidden;
           white-space: nowrap;     
           text-indent: 3%;
           font-weight: bold;
           font-size: 18px;
           color: white;
           margin-bottom: 1%;
           position: relative;
           top: 37%;
           }


 .navOne               {
           box-sizing: border-box;
           width: 100%;
           padding: 2px;
           height: 20px;
           box-shadow: 3px 3px 3px #333333;
           margin-top: 1%;
           margin-bottom: 3%;
           position: relative;
           top: 35%;
           font-size: 12px;
           font-family: Verdana, Arial, sans-serif; 
           font-weight: bold;
           text-indent: 6%;                 
           background-color: #3D75D5;
           overflow: hidden;
           white-space: nowrap;
           }

  a:hover          {
           color: Brown;
           }    

  nav a        {
           color: white;
           }    



  .LeftGroup       {
           box-sizing: border-box;
           background-color: white;
           width: 20%;
           padding: 10px;
           height: auto;
           margin-top: 1%;
           position: relative;
           float: left;
           }

  .RightGroup      }
                   box-sizing: border-box;
           background-color: white;
           width: 20%;
           padding: 10px;
           height: auto;
           margin-top: 1%;
           position: relative;
           float: right;
           }

  .MiddleGroup     {
           box-sizing: border-box;
           background-color: lightblue;
           margin-top: 1%;
           width: 60%;
           padding: 10px;
           height: auto;
           position: relative;
           left:20%;
               float: center;
               }                        

  .Footer          {
           box-sizing: border-box;
           background-color: gray;
           margin-top: 0;
           width: auto;
           bottom: 0;
           padding: 5px;
           position: relative;
           text-align: center;
           color: white;

                    }                       

Answer 1

• 请检查行 - .RightGroup 。您添加了右大括号而不是左大括号 {。
• 删除position:relative； left:20%; 来自 .MiddleGroup 并添加一个 float: left; 代替。同时删除 float: center;。 float 没有这样的值。
• 最后添加一个overflow: hidden;到.AllContent
• .BodyBackground 和 .AllContent 不需要 position: 样式。你可以删除它们。 position: center; 错误。