CSS浮动：3个浮动框

我在CSS中遇到一些浮动框的问题

<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>

一个
两个
第三，HTML结构应该保持这样，但是这个框应该从红色框的左边开始。

这是钢笔：

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

---

Sascha

下面的代码将得到您想要的结果

HTML

编辑：用完整代码更新了答案，以避免混淆，因为OP已经更新了问题中的演示。因此，在

.tre上不浮动将是我的最佳解决方案。
尝试以下方法：

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

别忘了把overflow:hidden放在parent div ie.container中，因为一旦你浮动了子元素，你就必须把overflow:hidden放在它的
中，你可以像下面那样改变你的结构

<div class="container">
  <div class="one">One</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 class="two">Two</div>
</div>


一个
第三，HTML结构应该保持这样，但是这个框应该从红色框的左边开始。
两个
不要浮动第三个/绿色框…如果您可以编辑您的答案，并解释您显示的代码的作用，以及该代码回答问题的原因/方式，它确实会有帮助。是的，这是一个很好的提示！希望有比溢出更好的解决方案：隐藏。有时候，我有一些内容（比如工具提示），因为这些内容而被切断。是的，我的朋友，这是真的。是的，这也奏效了。与float相同：我假设没有。我还不能悲伤地投票：(
.container {
  height:400px;
  border: 5px solid green;
}
.one {
  height: 100px;
  background: red;
  width: 60%;
  float: right;
  margin-left:40%;
  margin-bottom: 10px;
}
.two {
   height: 100px;
  background: blue;
  width: 60%;
  float: right;
}
.tre {
  height: 150px;
  background: green;
  width: 40%;
}

.container {
  height:400px;
  border: 5px solid green;
}

.one {
  width: 40%;
  height: 100%;
  float: left;
  background: blue;
}

.two, .three {
  width: 60%;
  height: 50%;
  float:right;
}

.two {
  background: yellow;
}

.three {
  background: red;
}

.tre {
  float: left;
 }

<div class="container">
  <div class="one">One</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 class="two">Two</div>
</div>