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

Question

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

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

我已经尝试了float:clear ..但也许我做得不对？

Answer 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。

Answer 2

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

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

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

Demo（调整输出窗口的大小以使其正常工作）

有关flexboxes @ CSSTricks

的更多信息