表格布局中表格单元格内的HTML内容具有不同的填充&；内容从其他单元格更改时的边距

我有一个固定的

表格布局

div父级，有两个水平

表格单元格

子级

在左边的单元格中，我只是简单地输入了一些文本。但是，当右单元格有一个高图像时，不管我输入了什么html填充和边距样式，左单元格上的文本都会被压缩到底部。当右单元格有多行文字时，左单元格上的文字将置于顶部

我希望左侧单元格中的文本始终位于顶部。我在哪里失踪

html

<div class="row-post">
  <div class="col-cell col-fixed" style="margin-top: 0px;padding-top: 0px;">
    <p>1</p>
  </div>
  <div class="col-cell pl-3">
    <img src="https://i.kym-cdn.com/photos/images/facebook/001/295/524/cda.jpg" style="height:300px">
  </div>
</div>

<hr>

<div class="row-post">
  <div class="col-cell col-fixed">
    <p>1</p>
  </div>
  <div class="col-cell pl-3">
  <p>Some long text</p>
  <p>Some long text</p>
  <p>Some long text</p>
  <p>Some long text</p>
  <p>Some long text</p>
  <p>Some long text</p>
  <p>Some long text</p>
  <p>Some long text</p>
  <p>Some long text</p>
  <p>Some long text</p>
  <p>Some long text</p>
  </div>
</div>

js小提琴，如果你想玩的话

js小提琴剪

---

对于表格渲染类型，可以使用：

vertical-align: top;

在任何“表格单元格”上

---

作为参考，这里有更完整的解释。

谢谢。救了我一天：））

vertical-align: top;