html - display:table-cell 画像追加時の奇妙な動作

Question

display:table-cell の列があります (同じ高さであることを確認するため)。各列の中にテキストがあります。セルの 1 つ (テキストの上) に画像を追加すると、画像のある列だけでなく、すべての列のテキストが押し下げられます。他の列のテキストが移動しないようにする方法はありますか?

<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 でプロパティを設定してください。