html - 表格单元格高度，img显示: block

Question

我对表格单元格的理解是，每个表格单元格的高度都会扩展到与最高表格单元格相同的高度；然而，在本例中，当 .col1 中的 img 为设置为 display: block 并且 .col2 中的文本被一直推到底部。如果 display: block 从 img 中移除，.col1 和 .col2 与对齐的文本对齐中间。我的问题是为什么 img 上的 display: block 会改变表格单元格的呈现方式以及文本的对齐方式。在 img 上切换 display: block 以查看差异。

https://codepen.io/norkuy/pen/EvQQrE

HTML

<div class="row1">
   <div class="col1">
        <img src="http://lorempixel.com/1000/800/" alt="">
</div>
<div class="col2">
  <p><div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet 
 mollitia est maiores temporibus ea, sint ex repellat ipsa eveniet nesciunt.
</div></p>
 </div>
</div>

<p><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab veniam 
praesentium delectus aliquid ea nisi porro eius rem debitis architecto quas, 
hic placeat ratione possimus voluptates perferendis at voluptatibus tenetur!
</div></p>

CSS

.col1, .col2 {
  width: 50%;
  display: table-cell;
}

.col2 {
  background: black;
  color: white;
}

.row1 {
  display: table;
  img {
    display: block;
  }
}

img {
  max-width: 100%;
  width: 100%;
}

Answer 1

如果你想让你的 table-cell 元素正常工作，你的 cells 容器必须有 table-row 显示

.table {
  display: table;
  width: 100%;
}
.row {
  display: table-row;
}

.cell {
  display: table-cell;
  width: 50%;
  vertical-align: middle;
  border-bottom: 1px solid #000;
}

<div class="table">
  <div class="row">
    <div class="cell">
    <br/><br/>fdfsf
    </div>
    <div class="cell">
    dffdsf
    </div>
  </div>
</div>