Question

描述有点令人困惑，但我有两个div。一个位于页面左侧，一个位于右侧通过浮动。右边的那个是HTML中的第一个，左边的那个是第二个。基本上，我想拥有它，所以左侧div位于顶部，而右侧div位于其下方。如果左边和右边的HTML按顺序排列，那就像删除浮动一样简单。但是，由于情况并非如此，我需要一点手。这是我设置的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不支持应该不是问题。

Here's my fork of your fiddle

Isotoma在调整CSS时引用了nice, readable introduction to flexbox。

Answer 2

如果你知道元素的height和width，就可以使用margin。

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

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

Demo

如果不这样做，可能需要使用JavaScript。这是similar question。

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

2 个答案: