CSS Div时彼此重叠 [英] CSS Divs overlapping each other

问题描述

大家好，这是我的DIV + CSS

Hi all this is my css for div

 <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的是重叠

But when I select some long text the 2 div's are overlapping

推荐答案

只是修改了一下你的CSS删除的位置是：固定的，并补充显示：在需要的表芯/表希望这将有助于：

just modified a bit your css remove position:fixed, and added display:table-cell/table where required hope it will help:

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

   }

另一个解决办法是删除位置是：固定，并添加盒大小：边界框左，右的div

another solution could be to remove position:fixed and add 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;
}

这篇关于CSS Div时彼此重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！