Question

我有三个元素，每个元素都有一个float属性。第一个元素具有一些内容，并向左浮动。侧栏和辅助元素向右浮动。当第二个元素的高度（代码笔中的蓝色）发生变化时，第三个（绿色）元素最终会部分移动到第一个元素下方。

我想让第三个（绿色）元素与蓝色元素保持相同的位置而又不移动位置的情况是什么？

  .test {
    background: purple;
    max-width: 967px;
    margin-left: auto;
    margin-right: auto;
    padding: 60px 0;
  }

  .one {
    width: 500px;
    height: 300px;
    background: beige;
    float: left;
  }

  .two {
    width: 300px;
    height: 200px;
    background: blue;
    float: right;
  }

  .three {
    background: green;
    height: 200px;
    width: 300px;
    float: right;
  }

  <section class="test">
    <article class="one"></article>
    <aside class="two"></aside>
    <section class="three"></section>
  </section>

这是我能想到的最好的例证。请注意，即使辅助元素至少与第一个元素一样高，第三部分也将保持在右侧：

-------   -----
|     |   |   |
|_____|   |___|
          _____
          |   |
          |___|

Answer 1

不确定这是您要寻找的吗？将蓝色和绿色包裹在一个div中，将其浮动，然后从蓝色和绿色中删除浮动对象。更改蓝色的高度可以使它们保持垂直堆叠，尽管当您缩小窗口时它们仍会包裹在第一个元素下面。您是否希望蓝色和绿色仍在顶部对齐，并且它们仅与第一个元素重叠？

.test {
  background: purple;
  max-width: 967px;
  margin-left: auto;
  margin-right: auto;
  padding: 60px 0;
  position:relative;
}

.one {
  width: 500px;
  height: 300px;
  background: beige;
  float: left;
}

.two {
  width: 300px;
  height: 400px;
  background: blue;

}

.three {
  background: green;
  height: 200px;
  width: 300px;

}
#wrap {
    float: right;
  }

<section class="test">
  <article class="one"></article>
  <div id="wrap">
  <aside class="two"></aside>
  <section class="three"></section>
  </div>
</section>

您也可以完全定位该包装器。不清楚你想要什么。

#wrap {
    position:absolute;
    top:0px;
    right:0px;
    padding:60px 0px 0px 0px;
  }

Answer 2

使用clear:right;

清除第三个元素中的浮点数

.test {
  background: purple;
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
  padding: 10px 0;
}

.one {
  width: 150px;
  height: 30px;
  background: beige;
  float: left;
}

.two {
  width: 80px;
  height: 50px;
  background: blue;
  float: right;
}

.three {
  background: green;
  height: 50px;
  width: 80px;
  float: right;
  clear:right;
}

<section class="test">
  <article class="one"></article>
  <aside class="two"></aside>
  <section class="three"></section>
</section>

高度变化时，向右浮动元素在向左浮动元素下方移动

2 个答案: