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

Question

嘿@all我在容器的左侧有一个图像，在右侧有一个文本。 我的目标是让图像保持在左侧，而在其下方不显示任何内容。这显然可以用引导来完成，但使用纯 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;
}
}

下面是它的样子： 带边距的屏幕截图

Answer 1

将文本内容包装在它自己的div 中并浮动它。

.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

我会在文本元素周围使用一个容器，并使用一个弹性框来.test每个弹性框项的默认设置是拉伸，这意味着它从上到下都有自己的空间，并且与弹性框中最高的项一样高。

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