Question

<div>
    <div style="display:inline-block;">
        <div style="display:none"></div>
    </div>
</div>

我试图理解这种内联块行为。这是我在标题和菜单栏中遇到一些响应元素时遇到的布局问题的简化版本。如果中间div不是内联块，则整个嵌套块将没有高度（或可见性，我不确定）。但是，如果中间div是一个内联块，它似乎没有显示最内层的子项（它在Firebug代码中用阴影表示，所以我假设它被隐藏了），但是parent div保持某种默认高度。

我发现的最好的解决方法，也为默认高度的来源提供了一些亮点，就是给外部div一个0或1px的行高。它仍然显示2-3px的高度，我可以为我的特定设计。但是，我可以想象这种解决方案无法工作的情况，所以看起来有点像黑客。

我有兴趣了解为什么这种特殊结构的行为方式如此。到目前为止，通过我的测试，当孩子没有显示时，它似乎是不折叠的。如果理解得当，它是嵌套显示器交互方式的错误还是逻辑结果？有没有比使用行高更好的方法来控制它？是否可以强制显示高度？

我对JS解决方案或建议解决方案涉及避免内联块的解决方案不感兴趣。将CSS添加到现有的建议结构中就可以了。在我看来，当显示未设置为none时，最佳解决方案将显示结构没有高度，对结构内显示的元素影响最小。我的问题是理论上和实际上一样多。

Answer 1

这是嵌套显示交互方式的错误还是逻辑结果？

内联元素（内联块和内联 - 它们都重现了你的问题），后面有空格。根据HTML规范，这与单个SPACE U + 0020字符具有相同的效果。这就是导致父div具有高度的原因。

有没有比使用line-height更好的方法来控制它？是否可以强制显示高度？

这实际上取决于你认为“更好”的东西。您可以浮动“中间”元素，而不是内联显示它。（这可能需要您清除父元素中的浮点数 - 有一个常见的修复方法，称为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/

具有子显示的子内联块的CSS div没有保持高度

1 个答案: