Question

我创建了一行，其中css规则显示设置为表。此行内的元素显示：table-cell。

现在的问题是，如果我要向单元格中添加新元素，则每个单元格的内容都不会位于该单元格的顶部。

这是我以代码格式在CSS中解决上述问题的方式：

.field-row {
  display: table;
  width: 100%;
}
.field-row .field-wrapper {
  display: table-cell;
  text-align: left;
}
.content-field {
  padding: 5px;
}

所以我想做的是，使所有列都处于相同的高度，并且内容应位于每一列的顶部。

我的代码的
jsfiddle：

.field-row {
  display: table;
  width: 100%;
}

.field-row .field-wrapper {
  display: table-cell;
  text-align: left;
}

.content-field {
  padding: 5px;
}

<div class="field-row">
  <div class="field-wrapper" style="background:rgba(0,0,0,0.2);">
    <div class="content-field profile">
      <div class="content-field">
        <img id="img" src="" height="150px" width="150px">
      </div>

    </div>
  </div>

  <div class="field-wrapper" style="background:rgba(0,0,0,0.5);">
    <div class="content-field">
      <h2>Column 2</h2>
    </div>
    <div class="content-field">
      <p>Hello World!</p>
    </div>
  </div>

  <div class="field-wrapper" style="background:rgba(0,0,0,0.2);">
    <div class="content-field">
      <h2>Column 3</h2>
    </div>
    <div class="content-field">
      <p>Hello World!</p>
    </div>
  </div>
</div>

希望我能为此找到解决方案。预先感谢！

Answer 1

如果我对您的理解正确，我认为您只需将export const names = { item1: <Image source={require('./path')} style={img} resizeMode="contain" />, item2: <Image source={require('./path')} style={img} resizeMode="contain" />, item3: <Image source={require('./path')} style={img} resizeMode="contain" /> }添加到您的vertical-align: top;样式中即可。

.field-row .field-wrapper

.field-row {
  display: table;
  width: 100%;
}

.field-row .field-wrapper {
  display: table-cell;
  text-align: left;
  vertical-align: top; /* add this here */
}

.content-field {
  padding: 5px;
}

CSS表格单元格内容不在顶部

1 个答案: