<div>
<div style="display:inline-block;">
<div style="display:none"></div>
</div>
</div>
我正在尝试了解这种内联块行为。这是布局问题的简化版本,我在标题和菜单栏中遇到了一些响应元素。如果中间div除了内联块之外什么都没有,则整个嵌套块将没有高度(或可见性,我不确定)。但是,如果中间div是内联块,则它的最里面的子项似乎不显示任何内容(在Firebug代码中为阴影,因此我假设它是隐藏的),但是父div保持某种默认高度。
我发现的最好的解决方法是使外部div的线高为0或1px,这也可以阐明默认高度的来源。它仍然显示2-3px的高度,对于我的特定设计,我可以接受。但是,我可以想象在这种情况下无法解决此问题的情况,因此看起来有点像黑客。
我有兴趣了解为什么这种特殊结构会以这种方式运行。到目前为止,通过我的测试,它看起来很独特,因为它的子级没有显示时不会崩溃。如果正确理解,这是错误还是嵌套显示交互方式的逻辑结果?有没有比行高更好的方法来控制它了?可以强迫它完全不显示高度吗?
我对JS解决方案或提出避免内联块的解决方法的解决方案不感兴趣。将CSS添加到现有的建议结构中很好。在我看来,最好的解决方案是不显示结构的高度,而将显示未设置为空时,对结构内部显示的元素的影响最小。我的问题既是理论上的,也是实践上的。
最佳答案
这是错误还是嵌套显示交互方式的逻辑结果?
内联元素(内联块和内联-都可以重新创建您的问题),其后有空格。根据HTML规范,这与单个SPACE U + 0020字符具有相同的效果。这就是导致您的父div具有高度的原因。
有没有比行高更好的方法来控制它了?可以强迫它完全不显示高度吗?
实际上,这取决于您认为“更好”的东西。您可以浮动“ middle”元素,而不是内联显示。 (这可能需要您清除父元素中的浮点数,对此有一个通用的解决方法称为clearfix)
这是示例代码,显示了有效的此方法:
HTML:
<div class="parent">
<div class="middle">
<div class="final">asdf</div>
</div>
</div>
CSS:
.middle{ float:left; }
.final{ display:none; }
/* Shading to show sizes of divs */
div { border:1px solid; background:rgba(0,0,0,.2); }
/* Clearfix */
.parent:before,
.parent:after {
content: " ";
display: table;
}
.parent:after {
clear: both;
}
实时示例:http://jsfiddle.net/16xp2m3L/2/