CSS Floats：3个浮动框答案

【问题标题】：CSS Floats: 3 floated boxesCSS Floats：3个浮动框
【发布时间】：2015-03-01 01:53:04
【问题描述】：

我在处理 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>

这是笔：

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

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

【问题讨论】：

不要浮动第三个/绿色框……

标签： css box

【解决方案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 上没有浮动对我来说是最好的解决方案。

【讨论】：

是的，这也有效。与浮动相同：我假设没有。可悲的是，我还不能投票:(

【解决方案2】：

.tre {
  float: left;
 }

不要忘记将 overflow:hidden 放在父 div 即 .container 中，因为一旦您浮动子元素，就必须将 overflow:hidden 放在其中

【讨论】：

是的，这是一个很好的提示！希望有比溢出更好的解决方案：隐藏。有时，我的内容（即工具提示）会因此而被截断。
你说的对，我的朋友

【解决方案3】：

试试这个：

.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%;
}

【讨论】：

【解决方案4】：

.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;
}

【讨论】：

如果您可以编辑您的答案并解释您所显示的代码的作用，以及该代码为何/如何回答问题，它真的很有帮助。

【解决方案5】：

你可以像下面这样改变你的结构...

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

【讨论】：