Question

我有下表（它包含2个tds，一个带有表单，另一个带有div）：

<tr>
  <td class='center-column'>
    <form>
      A Form
    </form>
  </td>
  <td class='right-column'>
    <div id='groupWrapper'>
       Some Stuff
    </div>
  </td>
</tr>

当我缩小屏幕时（使用@media查询）我希望两个td是一个在另一个之上。我通过写css成功地管理了这个：

.center-column{
  display:inline;
}
.right-column{
  display:inline;
}

问题是：右栏出现在底部。如何更改CSS以使其位于顶部且中心列位于底部？我只需改变CSS即可获得答案。（我试图左右浮动它们但没有用）

由于

Answer 1

使用flex，

将flex-direction: column-reverse;提交给tr以实现此目的。调整窗口大小以查看效果。

.center-column {
  flex: 1;
}
.right-column {
  flex: 1;
}
@media only screen and (max-width: 768px) {
  tr {
    display: flex;
    flex-direction: column-reverse;
  }
}

<table>
  <tr>
    <td class='center-column'>
      <form>
        A Form
      </form>
    </td>
    <td class='right-column'>
      <div id='groupWrapper'>
        Some Stuff
      </div>
    </td>
  </tr>
</table>

如何将顶部/底部的td与css对齐

1 个答案: