表格单元格高度，img 显示：块

Question

我对table-cell的理解是每个table-cell的高度都会扩大到和最高的table-cell一样高；然而，在本例中，当.col1 中的img 设置为display: block 并且.col2 中的文本一直被推到底部时，.col2 的高度会延伸到.col1 以下。如果从img 中删除display: block，则.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 元素正常工作，您的单元格容器必须有 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>