CSS Divs相互重叠

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>

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

Answer 1

删除：margin-right: -200px;

或设置margin-right :0。

Answer 2

刚刚修改了一下你的css删除位置：修复了，并添加了display：table-cell / table where required希望它会有所帮助：

   #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;

   }

另一个解决方案可能是删除位置：固定并添加box-sizing：border-box to left and right divs

#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。

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