HTML CSS浮動不起作用

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. 刪除float: left .text01 float: left
3. 添加overflow: hidden到文本
4. 您可能需要在圖像中添加marrgin-right

Answer 2

你想要這樣的東西嗎？ https://jsfiddle.net/uft4vaoc/10/

為段落和background-color: transparent添加寬度background-color: transparent

.text01 {
  position: relative;
  float: left;
  color: black;
  padding: 0;
  margin: 0;
  background-color: white;
  margin-top: 20px;
  height: 80%;
  width: 80%;
  background-color: transparent;
}