CSS 浮动：3 个浮动框

Question

我在 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 结构应保持原样。谢谢，萨沙

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

Answer 2

试试这个：

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

Answer 3

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

Answer 4

.tre {
  float: left;
 }

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

中

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

CSS 浮动：3 个浮动框

CSS Floats: 3 floated boxes

css

box