当我在其中键入单词时，为什么div会被其他div重叠？

Question

当我离开我的右侧div空时，没有重叠。但是，当我在绿色的div中输入单词＆＃34; greenhead＆＃34;我放在左侧，右边的白色div 展开并重叠。下面是我输入＆＃34; fff＆＃34;进入＆＃34;绿头＆＃34; DIV。在右边是如果我将绿色div留空的情况。

{........... {3}}

主页的Css代码，将页面分为3列。 （我使用的是sharepoint，因此我无法将这些代码写入主.aspx页面本身）：

.col1
{
    width:20%;
    float: left;

}

.col2
{
    width:50%;
    float: left;

}

.col3{

    width:0%;
    float: left;

}
.row1{
    content: "";
    display: table;
    clear: both;
}

主页中3列的Html代码。如图所示，蓝色＆amp;绿色块属于第1列，而白色div属于第2列。第3列未显示在图表中：

<div class="row1">
  <div class="col1" >
    <!--html codes for col1-->
  </div>
  <div class="col2">
       <!--html codes for col2-->
  </div>
  <div class="col3">
    <!--html codes for col3-->
  </div>
</div>

主页面上的内联CSS代码：

<style>

/*Rounded-border*/

    #rounded-border {
    border-radius: 10px;
    background: #4ca4ff;
    padding: 2px 10px 10px 10px;

    width:450%;
    height:200px;

    }
   .greenhead{


    background:#8fd500;
   padding: 2px 10px 0px 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    width:450%;
    color:white;
    display:inline-block;

}   
</style>

主页上的HTML代码：

<ul  id="rounded-border"></ul>
<!--blue block-->
<br/>


<div class="greenhead">
<!--green block--> fff  
</div>

   <!--white div is an sharepoint image carousel-->

Answer 1

你给出了.greenhead div的宽度为450％。因此它重叠。要么减小.greenhead的宽度大小，要么在列

中使用style="position:relative;