html - 向右浮动不起作用

Question

很抱歉这个非常基本的问题。我是 Css 的新手，并尝试让它工作。我有以下标记:

  <div class="box-title"><p>Element-Betonbecken Premium</p></div>
        <img src="img/page1/pool-top.png" class="pool-img" alt="" />
        <div class="box-small-title-right"><p>Elementtreppen</p></div>
        <div class="box-elementtreppen"></div>

我有这个用于标记的 Css:

.box-title {
  background-color: rgba(255, 255, 255, 0.5);
  width: 900px !important;
  height: 67px;
  margin-top: 20px;
  font-weight: 600;
  line-height: 67px;

}

.box-title p {
  font-weight: 600;
  line-height: 67px;
  padding-left: 20px;
}
.box-small-title-right {
  background-color: rgba(255, 255, 255, 0.5);
  width: 460px;
  height: 40px;
  float: right;
  margin-top: 2px;
}
.box-small-title-right p  {
  font-weight: 600;
  line-height: 40px;
  padding-left: 20px;
}
.box-small-title-left {
  opacity: 0.5;
  background: #ffffff;
  width: 420px;
  height: 40px;
}


/** PAGE 1 **/

.pool-img {
  width: 420px;
  height: 220px;
  margin-top: 2px;
}

.box-elementtreppen {
  opacity: 0.5;
  background: #ffffff;
  width: 460px;
  height: 304px;
  float: right;
}

我的目标是得到这个结果:

我知道有定位之类的东西，但好像我没有做对。

Answer 1

将 float:left 添加到此图像

<img src="img/page1/pool-top.png" class="pool-img" alt="" />

.pool-img {
      float:left;
 }

所以它为下一个div留出了空间

希望得到帮助