3

我有一个包含两个单元格的 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: leftand这样的浮点属性float: right，但它不起作用。

附言

我不能只删除表格布局而只使用浮动。它必须在桌面上显示为表格是有原因的。

4

1 回答 1

2

您可以使用flexbox 模型来做到这一点。新的 flexbox 模型尚未得到广泛支持（尤其是旧浏览器不支持，因为规范最近发生了变化），但由于您提到它适用于智能手机，因此此解决方案可能会为您解决问题。

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

设置不同前缀display的属性值和flex-direction包含元素的属性可确保容器在列方向上表现得像一个弹性盒子。

将各种前缀order属性设置为1on.cell1可确保覆盖 on 的初始值0，.cell1因此它会按顺序推cell1过去.cell2，因为它的顺序值高于cell2的顺序值（仍等于 的初始值0）。

这是一个jsFiddle演示这种方法。

CSS：

.table {
    display: table;
}

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

@media (max-width: 480px) {

    .table {
        display: -webkit-box;
        -webkit-flex-direction: column;
        display: -moz-box;
        -moz-flex-direction: column;
        display: -ms-flexbox;
        -ms-flex-direction: column;
        display: -webkit-flex;
        display: flex;
        flex-direction: column;
    }

    .table .cell2, .table .cell1 {
        width: 100%;
        display: block;
    }

    .table .cell1 {
        -webkit-box-ordinal-group: 2;
        -moz-box-ordinal-group: 2;
        -ms-flex-order: 1;
        -webkit-order: 1;
        order: 1;
    }
}
于 2013-05-21T02:15:36.563 回答