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

Question

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

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

更宽的窗口：

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

|左栏 |右栏 |

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

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

CSS

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

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

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

|右栏 |

|左栏 |

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

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

Answer 1

解决此问题的一种方法是使用media queries 和absolute positioning。 View it on 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;
  }
}