向右浮动不起作用

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的空间

希望帮助

Answer 2

你必须提供

.pool-img {
  float: left;
}