css 中的边距是否是清除图像下方 space 的正确方法？

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 中并浮动 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>

Answer 2

我会在文本元素周围使用一个容器和一个 flexbox for .test The default setting for each flexbox item is stretch，这意味着它将从上到下有自己的 space，并且与 flexbox 中最高的项目一样高.

.test {
  width: 300px;
  display: flex;
}

img {
  width: 100px;
  height: 100px;
}

<div class="container test">
  <img src="https://via.placeholder.com/100x100" alt="">
  <!-- Container added for text elements -->
  <div class="text-container">
    <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>

css 中的边距是否是清除图像下方 space 的正确方法？

Is a margin in css a proper way to clear space under an image?

html

css

margin

css-float