当内容从另一个单元格更改时，表格布局中的表格单元格内的 HTML 内容具有不同的填充和边距答案

【问题标题】：HTML Content within table cell from a table-layout has different padding & margins when the content is changed from the other cell当内容从另一个单元格更改时，表格布局中的表格单元格内的 HTML 内容具有不同的填充和边距
【发布时间】：2020-01-24 02:12:55
【问题描述】：

我有一个固定的table-layout div 父级和两个水平的table-cell 子级。

在左边的单元格中，我只是简单地输入了一些文本。但是，当右侧单元格具有高图像时，无论我输入什么 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>

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 小提琴片段

【问题讨论】：

标签： html css layout tablelayout

【解决方案1】：

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

vertical-align: top;

在任何“表格单元格”上。

Edited fiddle

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

【讨论】：

谢谢。拯救了我的一天:))