如何在不移动文本的情况下将图像放在页面右侧答案

【问题标题】：How do I place an image on the right side of the page without moving the text如何在不移动文本的情况下将图像放在页面右侧
【发布时间】：2021-04-30 22:31:06
【问题描述】：

正如问题所说，我想将文本添加到我的 div 标签中，但正如我所做的那样，页面上的所有文本都向下移动。我尝试将图像标签放置在不同的位置并使用对齐，但文本仍然会向下移动，并且我无法将图像置于矩形中间。这是我的 HTML 和 CSS：

<div class="rectangle1">
        <img class="pic1" src="../Images/1082.JPG" />
          <p class="rec1">Villa Tary is a charming Villa partly built from old wood on a 550sqm plot of land in the centre of Canggu. The villa is conveniently located between the beach (400m) and the beautiful Canggu club (500m) whose facilities can be fully enjoyed by the guests of the villa.</p>
    </div> 



.rectangle1 {
    height: 500px;
    width: 100%;
    background-color: white;

.rec1 {
    float: left;
    margin-right: 50%;
    margin-top: 150px;
    margin-left: 25px;
    font-family: 'Open Sans', sans-serif;
    font-size: 30px;

.pic1{
    float: right;
    height: 280px;
    width: 400px;
}

【问题讨论】：

标签： html css image text

【解决方案1】：

试试这个...

.rectangle1 {
      height: 500px;
      width: 100%;
      background-color: white;
  }
  .rec1 {
      float: left;
      margin-top: 150px;
      margin-left: 25px;
      font-family: 'Open Sans', sans-serif;
      font-size: 30px;
  }
  .pic1{
      float: right;
      height: 280px;
      width: 400px;
  }

<div class="rectangle1">
        <p class="rec1">
          <img class="pic1" src="../Images/1082.JPG" />
          Villa Tary is a charming Villa partly built from old wood on a 550sqm plot of land in the centre of Canggu. The villa is conveniently located between the beach (400m) and the beautiful Canggu club (500m) whose facilities can be fully enjoyed by the guests of the villa.
        </p>
    </div>

【讨论】：