强制显示div的高度：table-cell

Question

我有两个彼此相邻的表格单元格。右边的固定高度为75px（我无法改变），左边的高度需要70px。为了强制左侧div的高度，我使用了min-height，max-height，height和line-height，但没有一个帮助过。

在下图中，我所拥有的是左侧，我需要的是右侧。

我拥有什么 .......................... 我需要什么 < / p>

是否可以使用display: table-cell;的两个div来完成？

PS。我需要使用table-cell进行操作，因此，只有在无法完成时才建议其他解决方案。

由于

Answer 1

这是不可能的，至少是直接的。

正如§17.2.1 Anonymous table objects中所述，您的表格单元格为consecutive：

  

如果没有介入的兄弟姐妹，则两个兄弟盒是连续的   除了（可选）匿名内联仅包含白色   空间。如果每个框中的一个兄弟框是连续的   序列与序列中的序列连续。

因此，它们将生成公共表行和表：

  

产生失踪的父母：

     

  
1. 对于每个表格单元格＆＃39;框C以连续内部表格和表格标题的顺序排列＆＃39;兄弟姐妹，如果C的父母不是桌面排＆＃39;   然后生成一个匿名的表格行＃39;围绕C和所有的框   C的连续兄弟姐妹是表格单元格＃39;框。
  
2. 对于连续正确的表子项序列中的每个正确的表子C，如果C是错误的，那么生成一个匿名的表格＆＃39;   或者＆＃39;内联表＆＃39; C周围的框T和C的所有连续兄弟   这是适当的表儿童。 （如果C＆＃39;父母是＆＃39;内联＆＃39;框，   那么T必须是一个＆＃39;内联表＆＃39;框;否则它必须是一张桌子＆＃39;   框。）
  

然后，根据§17.5 Visual layout of table contents，

  

内部表格元素生成带有内容和的矩形框   边界。 [...]

     

这些盒子的视觉布局由矩形，   行和列的不规则网格。每个盒子占一个整数   网格单元格

你可以假设这个数字是1.它可能更多，但是

  

CSS 2.1没有定义跨越的行数或列数   测定

然后，两个单元格将具有相同的高度。

如果你不想要，你可以摆脱display: table-cell并改用其他方法。

例如，您可以考虑使用display: inline-table。如果您的元素中没有其他表格元素，它们将生成匿名表格单元格，用于封装内容。

＆＃13;

＆＃13;

#foo, #bar {
  display: inline-table;
  border: 3px solid red;
  width: 70px;
}
#foo { height: 30px; }
#bar { height: 75px; }

＆＃13;

<div id="foo">Foo</div>
<div id="bar">Bar</div>

＆＃13;

＆＃13;

＆＃13;

或者，如果元素必须是表格单元格，则可以在它们之间插入非空白内容。这样他们就不会连续，所以他们会产生不同的表格元素。

但是，请记住，如果单元格的父级是块，则生成的表格将是表格框，因此单元格将位于不同的行中。为避免这种情况，请将单元格放在内联元素中。这样生成的表将是内联表格框：

＆＃13;

＆＃13;

body { display: inline; }
#foo, #bar {
  display: table-cell;
  border: 3px solid red;
  width: 70px;
}
#foo { height: 30px; }
#bar { height: 75px; }

＆＃13;

<div id="foo">I am a table-cell</div>
<span><!-- I allow the cells to have different heights --></span>
<div id="bar">I am a table-cell</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

在没有完整的CSS和HTML审核的情况下，很难猜测这是一个很好的解决方案。

根据你描述的内容在本地模拟它;如果我浮动左表格单元格（例如DriverManager.getConnection("jdbc:hive2://<ip address of hive gateway server>:10000/default?zeroDateTimeBehavior=round"). ），然后设置它的高度，改变那个单元格的高度，但可能会对你的设置产生其他副作用，我可以＆＃39在我的模拟中预见到了。

我检查了FireFox和Chromium并浮动了table-cell div，允许我在两者中设置不同的高度。

Answer 3

这至少适用于Firefox：http://codepen.io/anon/pen/LVRjZR我建议你在生产环境中使用它之前进行浏览器测试，因为我认为表格单元并不意味着浮动。

＆＃13;

＆＃13;

.table {
  background-color: #eee;
  border: 1px solid black;
  display: table;
  width: 300px;
}
.cell {
  display: table-cell;
  float: left;
  vertical-align: top;
  width: 150px;
}
.cell-a {
  background-color: #a88;
  height: 50px;
}
.cell-b {
  background-color: #8a8;
  height: 75px;
}

＆＃13;

<div class="table">
  <div class="cell cell-a"></div>
  <div class="cell cell-b"></div>
</div>

＆＃13;

＆＃13;

＆＃13;