在移动视图中从左到右调整表格大小

【问题标题】：Resize tables left to right in a mobile view在移动视图中从左到右调整表格大小
【发布时间】：2020-06-10 15:27:32
【问题描述】：

我遇到了一个问题，我认为它在概念上非常简单，但我似乎无法使用 CSS 解决它。

我想在移动视图上从左到右堆叠两个表，因此左表移动到右下方，而不是默认的右表落在左表下方。

我试过float:clear..但也许我做得不对？

【问题讨论】：

【解决方案1】：

我认为只有这样才能实现：

HTML

<table class="right"></table>
<table class="left"></table>

CSS

.left, .right { float:right; width:49%; }

@media screen and (max-width:320px){
  .right, .left { float:none; width:100%; }
}

左侧表格必须在 HTML 中排在首位（使用float:right 将它们放置在您想要的默认屏幕尺寸上，并使用float:none 放置在移动屏幕尺寸上。

【讨论】：

【解决方案2】：

如果旧版浏览器支持不是问题，您可以使用 css3 flexible boxes 布局模型。

将以下内容应用于包含两个表的父元素

#container {
 display:flex;
 flex-flow: row wrap-reverse;
}

Demo（调整输出窗口的大小以查看它的工作情况）

更多关于弹性盒@CSSTricks

【讨论】：