CSS div 与子内联块与子显示没有保持高度答案

【问题标题】：CSS div with child inline-block with child display none maintains heightCSS div 与子内联块与子显示没有保持高度
【发布时间】：2014-11-21 16:42:07
【问题描述】：

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

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

我发现的最好的解决方法是给外部 div 的 line-height 为 0 或 1px，这也揭示了默认高度的来源。它仍然显示 2-3px 的高度，我可以接受我的特定设计。但是，我可以想象这种解决方法不起作用的情况，所以它看起来有点像 hack。

我有兴趣了解为什么这个特定结构会以这种方式运行。到目前为止，通过我的测试，它在子项没有显示时不会崩溃方面似乎是独一无二的。如果理解得当，它是错误还是嵌套显示交互方式的逻辑结果？有没有比使用 line-height 更好的方法来控制它？可以强制不显示高度吗？

我对 JS 解决方案或建议避免内联块的变通办法的解决方案不感兴趣。将 CSS 添加到现有的建议结构中很好。在我看来，最好的解决方案是不显示结构的高度，而当 display 未设置为 none 时，结构内显示的元素的影响最小。我的问题既有实际意义，又有理论意义。

【问题讨论】：

请提供一个 jsfiddle。干杯
请您用this 解释您想要什么以进行澄清（我刚刚将您的样式放入css类中）。？另外，为什么不只包含一个 min-height 属性？

标签： responsive-design css

【解决方案1】：

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

内联元素（inline-block 和 inline - 都会重新创建您的问题），在它们之后有空格。根据 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/

【讨论】：