Question

我有一个包含两个单元格的div表。现在我想在智能手机上显示我的页面时，在页面顶部显示第二个单元格，在页面底部显示第一个单元格：

<div class="table">
    <div class="cell1"></div>
    <div class="cell2"></div>
</div>

.table {
    display: table;
}

.table .cell1,
.table .cell2 {
    display: table-cell;
}

@media (max-width: 480px) {
    .table .cell1,
    .table .cell2 {
        width: 100%; // must be full width on smartphones
        display: block;
    }
    // how to display cell2 at top and cell1 at bottom?
}

我尝试添加像float: left和float: right这样的浮点属性，但它不起作用。

PS

我不能只删除表格布局而只使用浮点数。有一个原因必须在桌面上显示为表格。

Answer 1

您可以使用flexbox model执行此操作。新的flexbox模型是not yet widely supported（特别是旧的浏览器不是，因为规范最近已经改变了），但是既然你提到它可以在智能手机上运行，那么这个解决方案可能会为你做好准备。

我相信大多数智能手机浏览器会支持这个解决方案，我不太确定的一个浏览器是Windows Phone 8的IE10版本，IE10确实支持这种方法，但我不确定Windows Phone 8版本是否支持IE10的行为与桌面版完全相同。

在包含元素上设置带有各种前缀的display属性值和flex-direction属性可确保容器在列方向上的行为类似于弹性框。

在order上将1属性设置为.cell1可确保0上.cell1的初始值被覆盖，因此会推送{ {1}}在订单中超过cell1，因为其订单价值高于.cell2的订单价值（仍然等于其初始值cell2）。

这是一个 jsFiddle ，展示了这种方法。

<强> CSS ：

使用媒体查询重新排序div表格单元格

1 个答案: