HTML 来自 table-layout 的 table 单元格中的内容在其他单元格的内容更改时具有不同的填充和边距

Question

我有一个固定的table-layoutdivparent有两个水平的table-cellchildren。

在左侧的单元格中，我只是简单地输入了一些文本。但是，当右边的单元格有一个高大的图像时，无论我输入什么 html 填充和边距样式，左边单元格上的文本都会固定在底部。当右边的单元格有一些 multi-line 文本时, 左侧单元格中的文本置于顶部。

我希望左侧单元格中的文本始终位于顶部。我哪里漏了？

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>

css

.row-post {
  table-layout: fixed;
  width: 100%;
  word-break: break-all;
}
.row-post .col-cell {
  display:table-cell;
}

.row-post .col-cell img {
  max-width: 100%;
}

.col-fixed {
  width: 26px;
}

js fiddle如果你想玩

https://jsfiddle.net/f1zr6o93/

js fiddle 剪辑

Answer 1

对于 table 渲染类型，您可以使用：

vertical-align: top;

任何 "table cell".

Edited fiddle

作为参考，when vertical align applies in this other SO article 有更完整的解释。

HTML 来自 table-layout 的 table 单元格中的内容在其他单元格的内容更改时具有不同的填充和边距

HTML Content within table cell from a table-layout has different padding & margins when the content is changed from the other cell

html

css

layout

tablelayout