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;错了。

Answer 2

使用Bootstrap网格对齐。从Here下载Bootstrap并使用<div class="row"> <div class="col-md-4>在您的行中使用此col-md类。

网格系统在网页中有12列，可以分为4,4,4和8,4等。所以最好使用bootstrap。

如何让我的div内容停止延伸到我的其他div

2 个答案: