Question

我有一个外部div，我将其作为一个表格显示，并且有一个内部divs。

第一个内部div浮动到左侧。第二个内部div的最大高度为0。

.d-table {
       display: table;
      border: solid 1px black;
    }

    .float-left{
	    float: left;
    }

    .hidden{
      max-height: 0px;
      overflow-y: hidden;
	  clear: both;
    }

<div class="d-table">
      <div class="float-left">
         hey
      </div>
      
      <div class="hidden">
        cool
      </div>
    </div>

预期结果是：

实际结果是：

由于某种原因，该表考虑了高度为0的div。

JSFiddle

Answer 1

由于div的非零vertical-align: baseline和匿名单元格的display: table-cell而导致原因。

我会使用vertical-align: top以便能够使用.d-table { display: table-cell; vertical-align: top; border: solid 1px black; } .float-left { float: left; } .hidden { max-height: 0px; overflow-y: hidden; clear: both; }

设置单元格的样式

＆＃13;

<div class="d-table">
  <div class="float-left">hey</div>
  <div class="hidden">cool</div>
</div>

＆＃13;

display: table

＆＃13;

如果您需要line-height: 0，则无法设置匿名表格单元格的样式，但您可以使用.d-table { display: table; vertical-align: top; border: solid 1px black; } .float-left { float: left; } .hidden { line-height: 0; max-height: 0px; overflow-y: hidden; clear: both; }缩小空间。

＆＃13;

<div class="d-table">
  <div class="float-left">hey</div>
  <div class="hidden">cool</div>
</div>

＆＃13;

data:

＆＃13;

Answer 2

这是因为.hidden div仍然是DOM的一部分，并且会影响.d-table元素的位置计算。

而不是max-height: 0;，请使用display: none。这将从DOM流中删除元素。

Answer 3

.hidden元素理论上正确显示，高度为0。但是它有一个clear:both，而另一个div有float:left，他们的父母显示为表格。这是神奇的组合，混淆了父div的高度。

问题是：你首先从文档流中取出第一个div。它被放置在一个新的地方，但仍然不是真的存在（是的，花车像f ***一样怪异）。那么你clear:both第二个div，迫使它在新的一行。父div（忘记了所有关于第一个div和它占用的18个垂直像素），不能有0的高度（因为它的显示表），所以＆＃ 39; s给出了某种东西的最小高度 -

除了不使用这种组合之外，我真的没有其他解决方案。我建议实际隐藏隐藏的div（display:none）。

为什么我的CSS表显示最大高度为0的元素的高度？

3 个答案: