为什么在我输入文字时 div 会被其他 div 重叠？

Question

当我将右侧 div 留空时，没有重叠。但是，当我在我放在左侧的绿色 div "greenhead" 中键入单词时，它 扩展并与白色 div 重叠 ] 在右边。下面是我在 "greenhead" div 中键入 "fff" 时发生的情况的图表。右边是如果我将绿色 div 留空会发生什么。

...........

Css 主页代码，div 将页面分成 3 列。（我使用的是共享点，所以我无法将它们编码到主 .aspx 页面本身）：

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

}

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

}

.col3{

    width:0%;
    float: left;

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

Html 主页中 3 列的代码。如图所示，蓝色和绿色块属于第一列，而白色 div 属于第二列。图表中未显示第 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 指定了 450% 的宽度 div。因此它重叠。要么减小 .greenhead 的宽度大小并在列中使用 style="position:relative;

为什么在我输入文字时 div 会被其他 div 重叠？

Why div gets overlapped by other divs when I type words into it?

html

css

asp.net

sharepoint

overlapping