html - css 中的边距是清除图像下空间的正确方法吗？

Question

嘿@all 我在容器的左侧有一个图像，在右侧有一个文本。 我的目标是让图像保持在左侧，下方不显示任何内容。这显然可以通过 bootstrap 来完成，但是使用纯 CSS，img 下方的边距是否是将文本保持在右侧的正确方法？问题是边距必须根据段落的长度进行调整。执行此操作的更好方法是什么？

HTML

  <div class="container test">
        <img src="https://images.pexels.com/photos/34950/pexels- 
             photo.jpg?cs=srgb&dl=abandoned-forest-hd-wallpaper-34950.jpg&fm=jpg"
             alt="">
        <h3>hola</h3>
        <p>I am a long paragraph, a very long one Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
            nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam.</p>
    </div>

CSS

.test {
      width: 300px;

      img {
        width: 100px;
        height: 100px;
        float: left;
        margin-bottom: 10rem;
      }
    }

这是它的样子: Screenshot with margin

Answer 1

将文本内容包裹在它自己的 div 中并 float that。

.test {
  width: 300px;
}

img {
  max-width: 100px;
  float: left;
}

.wrap {
  float: left;
  width: 200px;
}

<div class="container test">
  <img src="http://www.fillmurray.com/460/300" alt="">
  <div class="wrap">
    <h3>hola</h3>
    <p>I am a long paragraph, a very long one Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam.</p>
  </div>
</div>