在彼此之上堆叠两个内部div，同时可能保持浮动

我已经发现了这个问题几次，但通常情况下，答案会涉及到删除浮动，或者问题已经足够老，浮动没有被使用。 另外，我是第一次css'er，请记住这一点。

所以，我有这个小提琴：https://jsfiddle.net/u1ydxoqn/

我想继续使用float（我想，我的意思是，我是一个css noob，所以如果这不是最佳做法，请让我知道。）我想要完成的是有黄色的rightBottom div，正好放在正确的rightMiddle div下面。

像这样的东西：

如果由于某种原因jsfiddle消失或有人无法访问该网站，这是我当前的代码。

HTML

div.myContainer {
  background-color: teal;
  overflow: hidden;
  width: 500px;
}

div.barAcrossTop {
  background-color: red;
  padding: 5px;
}

div.rightMiddle {
  background-color: orange;
  float:right;
  padding: 5px;
}

div.rightBottom {
  background-color: yellow;
  float: right;
  padding: 5px;
}

<div class="myContainer">
  <p>
    myContainer
  </p>
  <div class="barAcrossTop">
    <p>
      barAcrossTop
    </p>
  </div>

  <div class="rightMiddle">
    <p>
      rightMiddle
    </p>
  </div>

  <div class="rightBottom">
    <p>
      rightBottom
    </p>
  </div>
</div>

---

在rightBottom上添加clear both

div.rightBottom {
    background-color: yellow;
    clear: both;
    float: right;
    padding: 5px;
}

链接地址: http://www.djcxy.com/p/88419.html

上一篇: Stack two internal divs on top of eachother while possibly keeping float

下一篇: Scrollbars not hiding