Question

我的HTML中有一个使用display：table的表。在行中，我有两个单元格，其中有一些顶部/底部填充，而在那些内部我有<div> s可以是不同的高度：

<div style="display: table-row;">
    <div style="display: table-cell; padding-top:1rem; padding-bottom: 1rem;">
       <div style="background-color: red;">
          <input ng-model="row.abc">
       </div>
    </div>
    <div style="display: table-cell; padding-top:1rem; padding-bottom: 1rem;">
       <div style="background-color: blue;">
          <input ng-model="row.def">
          <input ng-model="row.ghi">
       </div>
    </div>
</div>

有什么方法可以让红色和蓝色的高度相等？因为现在红色只是蓝色高度的一半。请注意，我不是在寻找可以使两个输入内联的东西。我正在寻找一种方法，使红色区域的高度扩大，以匹配蓝色的任何高度，反之亦然。

我希望使用现代浏览器。感谢

Answer 1

为什么不将div放入细胞内？因为这样可行。

<div class="table">
    <div class="table-row">
        <div class="table-cell" style="background-color: red;">
           <input type="text" value="test" />
        </div>
        <div class="table-cell" style="background-color: blue;">
              <input type="text" value="test" />
              <input type="text" value="test" />
        </div>
    </div>
</div>

http://jsfiddle.net/e6vx7j8d/

Answer 2

是否有令人信服的理由使用嵌套的<div>元素而不是普通的表元素？

在任何情况下，您都应该能够将height: 100%设置为每个表格单元格的样式，以强制每个表格单元格填充其容器的垂直尺寸。

如何在显示内部显示<div>的高度：table-cell为100％

2 个答案: