css - CSS 媒体查询：如何在小屏幕上让右栏显示在左上方？

Question

调整窗口大小时，如何使右列高于左列？默认行为是右列滑到左下方。

这是说明我的目标的图表：

更宽的窗口：

++++++++++++++++++++++++++++++

| 左栏 | 右栏 |

++++++++++++++++++++++++++++++

这是用于生成该布局的 CSS：

CSS

.left { 
  width:auto;
  overflow:hidden;
  float:none;
}
.right {
  width:500px;
  float:right
}

这是我想在较窄的窗口（例如移动设备）上显示的内容：

++++++++++++++++

| 右栏 |

| 左栏 |

++++++++++++++++

我知道媒体查询是关键，但我不知道要使用的代码。有什么建议吗？

Answer 1

解决此问题的一种方法是使用媒体查询和绝对定位。在 JSFiddle 上查看。

媒体查询，如果你不熟悉，基本上说“在这种特殊情况下应用这个 CSS”。绝对定位让我们可以将 div 移动到任何我们想要的位置。

在下面的代码中，当我们的视图缩小到 700 像素以下时，我们会滑动 div。要让 Fiddle 显示这个，要么缩小浏览器窗口，要么缩小“结果”面板，直到你看到过渡。（在我的电脑上，滑动结果面板的延迟要小得多）

css

#left {
  background: #eee;
  height: 60px;
  width: 200px;
  position: absolute;
  top: 0;
  left: 0;
}
#right {
  background: #ddd;
  height: 60px;
  width: 200px;
  position: absolute;
  top: 0;
  left: 200px;
}

@media screen and (max-width: 700px) {
  #left {
    background: #2f6497;
    top: 60px;
  }
  #right {
    background: #002d62;
    left: 0;
  }
}