我怎样才能让我的div内容停止延伸过去我的其他div

Question

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

我想为我的学校做一个网页。

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

我有我的.BodyBackground（持有我的背景图片）

该div里面我有休息：

我有.allContent（持有网PAGE0的其余部分）该专区内

我有.LeftGroup,.MiddleGroup和.RightGroup。 3个不同div可以保存不同风格的文本/信息。

在底部，我有我的.footer股利。

Now！他们都在正确的地方。

但.LeftGroup和.RightGroup正在扩展过去常常被放置在div。

的.MiddleGroup在它击中.LeftGroup DIV位置缩进。

我花了几个小时尝试不同的事情，没有成功。 有人可以请帮我..

网站代码应该没什么大问题，我解释了它在样式表中的代码是怎么回事。

这里是CSS（样式）代码...（这是我的第一次，我希望它显示了右）Here

.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

使用引导电网alignment.Download引导和使用<div class="row"> <div class="col-md-4>使用这个关口-md类在你的行中。

网格系统在网页中有12列，它可以分为4,4,4和8,4等等。所以更好地使用引导。

Answer 2

• 请检查行 - .RightGroup }。您添加了大括号而不是开大括号{。
• 从.MiddleGroup中删除position: relative; left:20%;，并改为添加float: left;。还请删除float: center;。 float没有这样的价值。
• 最后加overflow: hidden;到.AllContent
• .BodyBackground和.AllContent不需要position:风格。你可以删除它们。 position: center;是错误的。