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

我对表格单元的理解是，每个表格单元的高度将扩展到与最高的表格单元相同的高度；但是，在本例中，

.col2

的高度延伸到

.col1

以下，此时

中的
img
设置为
显示：块
，而
中的文本一直推到底部。如果
display:block
从
img
中删除，
.col1
和
.col2
将文本对齐到中间。我的问题是为什么
img
上的
显示：block
会更改表格单元格的呈现方式和文本对齐方式。在
img
上切换
display:block
，查看差异


HTML
如果希望
表格单元格
元素正常工作，单元格容器必须显示
表格行


.table{
显示：表格；
宽度：100%；
}
.行{
显示：表格行；
}
.细胞{
显示：表格单元格；
宽度：50%；
垂直对齐：中间对齐；
边框底部：1px实心#000；
}



fdfsf
dffdsf
您的HTML无效。段落不能包含div。请尝试使用垂直对齐：top；在您的表格单元格元素上。您缺少的是，对于我的代码笔示例，您的行应该具有
表格行
显示p标记中删除的div。问题仍在发生。我不仅在寻找一个解决方案，而且还在寻找一个“为什么”来解释为什么会发生这种情况。可能是错误的，但我认为表中缺少的部分是按照规范作为匿名元素添加的。如果我删除垂直对齐：中间，问题仍然会发生。无论其是否为显示：表行，也会发生此错误。
<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>

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

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

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

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