CSS div 相互重叠

Question

大家好，这是我的 div 的 CSS

 <style type="text/css">
    #container
    {
        width: 100%;
        padding-right: 200px;
    }

    #autowidth
    {
        width: 80%;
        float: right;
        z-index: 1;
        position: relative;
    }

    #fixed
    {
        width: 20%;
        position: fixed;
        z-index: 1;
        float: left;
        margin-right: -200px;
    }
</style>

这是我的设计

 <div id="container">
 <div id="fixed">
 <table>
     // my controls
 </table>
 </div>
 <div id="autowidth">
 <table>
     // my controls
 </table>
 </div>
 </div>

但是当我选择一些长文本时，两个 div 重叠

Answer 1

删除：margin-right: -200px;

或设置margin-right :0。

Answer 2

刚刚修改了一点你的 css 删除位置：固定，并在需要的地方添加了 display:table-cell/table 希望它会有所帮助：

   #container {
       width: 100%;
       padding-right: 200px;
       display:table;
   }
   #autowidth {
       width: 80%;
       display:table-cell;
       z-index: 1;
       position: relative;

   }
   #fixed {
       width: 20%;
       z-index: 1;
       display:table-cell;
       margin-right: -200px;

   }

另一种解决方案是删除 position:fixed 并将 box-sizing:border-box 添加到左右 div

#container {
    width: 100%;
    padding-right: 200px;
}
#autowidth {
    width: 80%;
    float: right;
    z-index: 1;
    position: relative;
    box-sizing:border-box;

}
#fixed {
    width: 20%;
    z-index: 1;
    float: left;
    margin-right: -200px;

    box-sizing:border-box;
}

Answer 3

我认为这可以解决问题：

1.尝试设置重叠的div的宽度。 （或者） 2.试试内联css。

如果您分享屏幕截图，我可以提供更好的帮助。