css - 盒模型布局，隐藏内部元素，外围高度居然没有改变？求解决办法

问题描述

html<p class='setting'> <p class='layout-left'>left</p> <p class='layout-right'><p class='change'>change</p><p class='change'>change</p><p class='change'>change</p><p class='change'>change</p><p class='text'>right</p><p class='text'>right</p><p class='text'>right</p><p class='text'>right</p> </p> </p> <p>next...</p> <button>click me</button>

css.setting{ display: -moz-box; display: -webkit-box; display: -ms-flexbox; display: box;}.setting > p{padding:0 20px;border:1px solid #999;}.change{background:red;}

javascript$(’button’).click(function(){ $(’.change’).hide();});

前后效果图对比：||

可以看到，点击按钮，红色背景的.change{display:none;}但是外围使用了盒模型样式的.setting的高度竟然没有变化，这是为什么？怎么解决？写了个小demo，可以直接点击看效果

问题解答

我这样试了试，可以：

$(’button’).click(function(){ $(’.change’).hide(); $(’.setting > p’).css(’min-height’, ’1px’); });

点这里调试