CSS float : 3 floated boxes

Question

我在处理 CSS 中的一些 float 框时遇到了问题。

<div class="container">
<div class="one">One</div>
<div class="two">Two</div>
<div class="tre">Three - The HTML structure should stay like this, but this box should be starting to the left of the red box.</div>
</div>

这是笔:

http://codepen.io/anon/pen/myKzMd

我希望左边的绿色框与红色框的起始高度相同。 HTML 结构应保持原样。 谢谢， 萨沙

Answer 1

下面这段代码会得到你想要的结果。

HTML

<div class="container">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="tre">Three - The HTML structure should stay like this, but this box should be starting to the left of the red box.</div>
</div>

CSS

.container {
  height:400px;
  border: 5px solid green;
}
.one {
  height: 100px;
  background: red;
  width: 60%;
  float: right;
  margin-bottom: 10px;
}
.two {
  height: 100px;
  background: blue;
  width: 60%;
  float: right;
}
.tre {
  height: 150px;
  background: green;
  width: 40%;
}

编辑:用完整代码更新了答案，以避免混淆，因为 OP 已经更新了问题中的演示。所以 .tre 上没有 float 对我来说是最好的解决方案。