表格单元格中的Flexbox出现在垂直中间

时间：2018-11-13 04:33:34

标签： html css css3 html-table flexbox

我在表中使用flexbox。 该表有2列，每列有一个单元格。 左单元格很大，高度可能为189％。 我的CSS如下：

#openemail {
  display: flex;
  flex-flow: column;
  height: 100%;
}

#openemail>#header {
  flex: 0 1 auto;
}

#openemail>#body {
  flex: 1 1 auto;
}
<table id="app">
  <tr>
    <td>
      <div id="emailslist"><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></div>
    </td>
    <td>
      <div id="openemail">
        <div id="header">SSS</div>
        <div id="body">more SSS</div>
      </div>
    </td>
  </tr>
</table>

如您所见，flex容器最终位于中间，很难找到。我的问题是：如何更改CSS，使flex容器位于表格单元格的顶部？

3 个答案:

答案 0 :(得分：2)

会在表单元格中添加vertical-align：top吗？像这样：

<table id="app">
  <tr>
    <td>
      <div id="emailslist"><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></div>
    </td>
    <td style="vertical-align: top;">
      <div id="openemail"><div id="header">SSS</div><div id="body">more SSS</div></div>
    </td>
  </tr>
</table>

答案 1 :(得分：1)

推荐：

在{em> 2018 中将vertical-align: top应用于<td>似乎是最佳解决方案，CSS3和HTML5完全支持该解决方案。这是一个工作示例：

table, th, td {
    border: 1px solid black;
}

#openemail {
    display: flex;
    flex-flow: column;
    height: 100%;
}

#openemail>#header {
    flex: 0 1 auto;
}

#openemail>#body {
    flex: 1 1 auto;
}
    <table id="app">
<tr>
    <td>
        <div id="emailslist">
            placeholder<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        </div>
    </td>
    <td style="vertical-align: top">
        <div id="openemail"><div id="header">SSS</div><div id="body">more SSS</div></div>
    </td>
</tr>
</table>

要了解有关vertical-align样式的更多信息：https://www.w3schools.com/cssref/pr_pos_vertical-align.asp

不推荐：

如果您使用的是旧版HTML，以下解决方案也可以使用：将valign的{​​{1}}属性设置为<td>。看起来像这样：

top
table, th, td {
    border: 1px solid black;
}

#openemail {
    display: flex;
    flex-flow: column;
    height: 100%;
}

#openemail>#header {
    flex: 0 1 auto;
}

#openemail>#body {
    flex: 1 1 auto;
}

要了解有关 <table id="app"> <tr> <td> <div id="emailslist"> placeholder<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> </div> </td> <td valign="top"> <div id="openemail"><div id="header">SSS</div><div id="body">more SSS</div></div> </td> </tr> </table>属性的更多信息：https://www.w3schools.com/tags/att_td_valign.asp

希望这会有所帮助！

答案 2 :(得分：1)

由于您正在处理表格单元，因此vertical-align属性开始起作用。此属性仅适用于内联级别和表单元格元素。

vertical-align属性的默认值according to the spec为baseline。但是，改用专业browsers tend to use the middle value。

在任何情况下，表格单元格的内容都垂直居中。

您可以使用vertical-align: top覆盖此设置。

更多详细信息：Default value of vertical-align for table cells

相关问题
最新问题