将div折叠到iphone布局的100%

Question

如果我没有花几个小时挖掘文件和进行研究，我真的不会发布问题。我一定真的不知道我在找什么：-|

我想知道当一个响应式设计被缩放到iphone尺寸时，容器（或容器本身）中的div是如何以及为什么会变为100%宽度的，如下所示：

http://demo2.woothemes.com/whitelight/about/

侧边栏位于主要内容下方，然后里面的div扩展到100%

这简直把我逼疯了！任何帮助/指导都必须感谢：）

Answer 1

基本媒体查询响应布局示例：

演示：http://jsbin.com/ayojan/1/edit

调整浏览器大小以查看效果。

div {
  outline:solid black;
}
.content {
  width:80%;
  float:left;
}
.sidebar {
  width:20%;
  float:left;
}
@media only screen and (max-width: 767px) {
  .sidebar {
    width:100%;
    float:none;
}
  .content {
    width:100%;
    float:none;
  }
}

要点：在媒体查询中，您取消浮动元素（float:none），并将其设置为宽度：100%；