css - 像源重新排序一样重新排序 Div

Question

我正在使用两个分区。(两个高度都设置为自动)。

现在，在移动 View 中，我希望左 View 为 100% 宽度，在底部和右 View 为 100%，在顶部；如何实现这一目标？

如果我给 margin-left:100% 左边和 margin-left:-100% 右边 它们就会离开屏幕，水平滚动条在浏览器中显示。

这是 FIDDLE

Answer 1

这是一个使用完全相同的 HTML 的示例。只有 CSS 发生了变化，这可以通过媒体查询来完成。

html, body{ height:100%; width:100%; margin:0; padding:0 }

#red{ 
  background:red; height:40%; width:50%; float:left;
} 

#yellow{ 
  background:yellow; height:40%; width:50%; float:left;
}

<div id="yellow"></div><div id="red"></div>

html, body{ height:100%; width:100%; margin:0; padding:0 }

#red{ 
  background:red; height:40%; width:100%; 
} 

#yellow{ 
  background:yellow; height:40%; width:100%;
}

<div id="yellow"></div><div id="red"></div>

编辑:如果您希望翻转它们，请使用以下代码。

html, body{ height:100%; width:100%; margin:0; padding:0 }

#red{ 
  background:red; height:40%; width:100%; 
  position:relative;
  top:-40%;
} 

#yellow{ 
  background:yellow; height:40%; width:100%;
  position:relative;
  top:40%;
}

<div id="yellow"></div><div id="red"></div>