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中，然后浮动那个。

.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使用一个flexbox，每个flexbox项的默认设置为stretch，这意味着它将自上而下拥有自己的空间。底部，将与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的空白是否是清除图像下方空间的正确方法？

2 个答案: