Question

<div id='wrapp'>
    <div id='left'>LEFT</div>
    <div id='right'>
        <div id='rightTop'>rightTop</div>
        <div id='rightBottom'>rightBottom rightBottom rightBottom rightBottom rightBottom rightBottom rightBottom rightBottom rightBottom rightBottom rightBottom rightBottom rightBottom rightBottom rightBottom rightBottom rightBottom rightBottom rightBottom rightBottom rightBottom rightBottom rightBottom</div>
    </div>
</div>

CSS

#wrapp{
    display:table;
    width:100%;
}
#left{
    display:table-cell;
    width:30px;
    padding-left:0.5%;
    background:green;
}
#right{
    display:table-cell;
    background:blue;
}
#rightTop{
    width:90%;
    margin:0 auto 2px auto;
    background:yellow;
    line-height:27px;
    cursor:pointer;
}
#rightBottom{
    width:90%;
    margin:0 auto 25px auto;
    background:#e1e1e1; 
    text-align:justify;
}

JS

$('#rightTop').click(function(){
    $('#rightBottom').toggle();
});

为什么点击#rightTop（切换下方的div）会将#rightTop的宽度更改为几个像素？

仅在Chrome中发生，而不是在Firefox中发生。

我尝试使用jsfiddle重现问题 - 但它没关系，没有宽度变化。（这是fiddle）。

以下是live example - 如果有人点击标题（名为KLANICA）并检查标题在Chrome中更改其宽度的原因。

Answer 1

将CSS更新为以下内容以便解决：

.ch #divR {
display: table-cell;
table-layout: fixed;
width: 75%;
}

.ch #divL {
display: table-cell;
width: 25%;
padding-left: 0.5%;
}

在下面切换div会更改单击的div的宽度

1 个答案: