HTML CSS float 不工作

Question

有人可以帮助我吗，由于某种原因我无法让 img 和 p 标签彼此相邻。我一定是遗漏了一些非常简单的东西，谢谢你的帮助。

.sec03 {
  border-radius: 20px;
  margin-bottom: 20px;
  background-color: darkgrey;
  height: 20%;
  width: 100%;
  position: relative;
  display: inline-block;
}
.img02 {
  height: 80%;
  width: auto;
  padding: 0;
  margin: 0;
  position: relative;
  float: left;
  background-color: #333;
  display: inline-block;
  margin-top: 20px;
}
.text01 {
  position: relative;
  float: left;
  color: black;
  padding: 0;
  margin: 0;
  background-color: white;
  margin-top: 20px;
  height: 80%;
  display: inline-block;
}

<div class="sec03">
  <img class="img02" src="images/landscape.png">
  <p class="text01">On no twenty spring of in esteem spirit likely estate. Continue new you declared differed learning bringing honoured. At mean mind so upon they rent am walk. Shortly am waiting inhabit smiling he chiefly of in. Lain tore time gone him his dear sure.
    Fat decisively estimating affronting assistance not.</p>
</div>

Answer 1

你应该

1. 从所有三个类中删除display: inline-block。
2. 从 .text01 中移除 float: left
3. 在文本中添加overflow: hidden
4. 您可能希望为您的图像添加 marrgin-right