Question

我在图片旁边有文字，但是我在margin-left上遇到了困难，因为它没有将文字推离图片25px。

.standards img {
  float: left;
  margin-top: 50px;
  width: 400px;
  height: 350px;
  margin-left: 50px;
}

.standard-main p {
  margin-top: 50px;
  margin-left: 50px;
  margin-right: 50px;
}

<div class="standards">
  <img src="https://placekitten.com/100/100" alt="">
</div>
<div class="standard-main">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus
    vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis
    imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>
</div>

Screenshot

任何帮助将不胜感激，并在此先感谢

Answer 1

嗯，float和边距之间的关系很复杂。

您可以做的是给p提供475px的左边距（图片的宽度及其边距，再加上25px的所需间隙）。但是，p中的文本将不再在图像周围流动。因此，在这种情况下，最简单的解决方案是为img设置25px的右边距。

.standards img {
  float: left;
  margin-top: 50px;
  width: 400px;
  height: 350px;
  margin-left: 50px;
  margin-right:25px;
}

.standard-main p {
  margin-top: 50px;
  margin-left: 50px;
  margin-right: 50px;
}

<div class="standards">
  <img src="https://placehold.it/400x350" alt="">
</div>
<div class="standard-main">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus
    vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis
    imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>

将文本的左边缘移离图像

1 个答案: