<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/

10-07 19:07
查看更多