CSS 有一个 div 位于左 div 的右下方。 HTML 中的 div 是相反的

Question

描述有点令人困惑，但我有两个 div。一个位于页面左侧，一个通过浮动位于页面右侧。右边是 HTML 中的第一个，左边是第二个。基本上，我希望左侧 div 位于顶部，右侧 div 位于其下方。如果 HTML 上的 Left 和 Right 是有序的，那么就像删除浮动一样简单。然而，由于情况并非如此，我需要一些帮助。这是我设置的jsfiddle： http://jsfiddle.net/7bTjj/

Answer 1

在过去，您必须使用绝对定位。现在，您可以使用为管理布局而创建的 CSS3 属性来解决此问题。

使用 display:box 和 box-ordinal-group 属性以您喜欢的任何顺序显示 .container 的内容，而无需使用浮点数all：（

-webkit 供应商前缀只是为了简单起见）

.container, .left, .right {
  display:-webkit-box;
  -webkit-box-orient: vertical;
}

.left {
  -webkit-box-ordinal-group: 1;
}

.right {
  -webkit-box-ordinal-group: 2;
}

由于您的目标是移动设备，因此 IE 缺乏支持应该不是问题。

这是我的小提琴分支。

Isotoma 有一篇 关于 Flexbox 的漂亮易读的介绍，我在调整 CSS 时引用了它。

Answer 2

如果您知道元素的高度和宽度，则可以使用边距。

.left {
  height:20px;
  width:70%;
  float:left;
  margin-left:-30%;
}

.right {
  width:30%;
  float:left;
  margin-top:20px;   
}

演示

如果您不这样做，则可能需要 JavaScript。这是一个类似问题。