CSS 有一个 div，它位于左 div 的右下方。div 在 HTML 中是反向的

Question

描述有点混乱，但我有两个 div。一个位于页面左侧，一个通过浮动位于右侧。右边的在 HTML 中是第一个，左边的在第二个。基本上，我想拥有它，因此左侧 div 位于顶部，右侧 div 位于其下方。如果 HTML 中的 Left 和 Right 是按顺序排列的，那么就像删除浮动一样简单。但是，由于情况并非如此，我需要一点帮助。这是我设置的 jsfiddle：http : //jsfiddle.net/7bTjj/

Answer 1

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

使用display:box和box-ordinal-group属性以.container您喜欢的任何顺序显示您的内容，根本不使用浮点数：

（-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 时参考了它。