时间戳

首页 > 解决方案 > 如何在不移动文本的情况下将图像放在页面右侧

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

问题描述

正如问题所说，我想将文本添加到我的 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;
}

标签： htmlcssimagetext

解决方案

试试这个...

.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>

推荐阅读