html - display:table-cell 添加图像时的奇怪行为

Question

我有带有 display:table-cell 的列（以确保它们具有相同的高度。）每个列内都有一些文本。当我将图像添加到其中一个单元格（在文本顶部）时，所有列中的文本都被向下推，而不仅仅是带有图像的列中。有没有办法防止其他列中的文本移动？

<div class = 'column'>
  <h1>Some text</h1>
</div>
<div class = 'column'>
  <img src='image.png'/>
  <h1>Some other text</h1>
</div>

.column {display:table-cell}

Answer 1

这是未经测试的，但你有没有试过

.column {
  display: table-cell;
  vertical-align: top;
 }

老实说，我会避免使用display: table-cell. height改为使用 css设置属性。