Question

这是桌面和移动设备所需的显示器：

我有3列。第1列（左侧边栏），第2列（主要div）和第3列（右侧边栏。

第2列包含内容A，B，C和D.

在移动设备上，我需要列的宽度为100％，其顺序为

第2栏，第1栏，第3栏。

但我需要移动设备上的内容顺序为：

第2栏内容A，第1栏，第3栏，第2栏内容B，第2栏内容C，第2栏内容D.

这就是我正在使用的：

    @media screen (max-width: 1023px), (min-width: 799px) {

    }
    .column2 {
            position:absolute;top:300px;left:180px;width: calc(100% - 360px);
            left: 180px; text-align: center;
    }
    .column1 {
        position:absolute;top:50px;left:0px;width:180px;
    }

    .column3 {
        position:absolute;top:50px;right:0px;width:180px;
    }
}
@media screen and (min-width: 1023px) {

    }
    .column2 {
            position:absolute;top:430px;left:180px;width: calc(100% - 360px);
            left: 180px;text-align: center;
    }
    .column1 {
        position:absolute;top:50px;right:0px;width:180px;

    }
    .
    .column3 {
        position:absolute;top:50px;right:0px;width:180px;height:50px;
    }

}
@media screen and (max-width: 799px) {

    .column2 {

    }
    .column1 {

    }
    .column3 {

    }
}

问题是上面的代码导致移动设备显示为列2 A，B，C，D - 列2，列3.当我实际需要Col 2A，Col 1，Col 3，Col 2B，Col 2C ，Col 2D。

我该怎么做才能解决这个问题？

Answer 1

我得到了它的工作。我发现我必须使用margin-top而不是position：absolute for column2，并且我必须保持div为Column2B，C，D，E内容打开。第3列也必须进入第2列，这导致我必须将位置设置为负像素以补偿第2列的定位。

如果有人有更好的解决方案，我会接受你的答案，而不是我自己的答案。

这是我的解决方案：

https://jsfiddle.net/jc5Lsqcj/

@media screen (max-width: 1023px), (min-width: 799px) {

    }
    .column2 {
            position:absolute;top:50px;left:180px;width: calc(100% - 360px);
            left: 180px; text-align: center;
    }
    .column1 {
        position:absolute;top:50px;left:0px;width:180px;
    }

    .column3 {
        position:absolute;top:0px;right:-180px;width:180px;
    }
}
@media screen and (min-width: 1023px) {

    }
    .column2 {
            margin-top:5px;left:180px;width: calc(100% - 360px);
            left: 180px;text-align: center;
    }
    .column1 {
        position:absolute;top:50px;right:0px;width:180px;

    }
    .
    .column3 {
        position:absolute;top:-50px;right:-180px;width:180px;height:50px;
    }

}
@media screen and (max-width: 799px) {

    .column2 {

    }
    .column1 {

    }
    .column3 {

    }
}

<div class="column1">fds<hr /></div>

<div class="column2">fff

<div class="column3">qqq<hr /></div>

<br>ggg ppp<br><br>
  qqqq
</div>

需要侧边栏在移动设备上垂直显示，排序不正常

1 个答案: