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结构应保持原样。谢谢，的Sascha

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

.tre {
  float: left;
 }

别忘了把溢出：隐藏在父div中，即.container，因为一旦浮动了子元素，就必须将溢出：隐藏在其

中

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

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

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 Floats：3个浮动盒子

5 个答案: