图像和文本元素的间距

Question

我正在尝试创建单独的图像和文本部分。

当图片和文字部分包含大量内容时，内容永远不会在图片下方。内容始终位于其内容区域内。
*这是我一直遇到的问题....文本一直在图像下方换行，并且每个图像和文本部分之间的间距都不均匀。

下面是我一直在修改的示例代码，但到目前为止我还没有得到我上面解释的结果，以及下面的图像示例。

我已经尝试/将以下 CSS 单独添加到段落标记中，但仍然无法按预期工作。 溢出：隐藏； 显示：块；

我没有要分享的 URL/页面，因为我在本地创建此页面。

非常感谢任何帮助！

 

<a href="https://example.com/wp-content/uploads/2021/11/sample-image-name.jpg"><img 
class="alignleft wp-image-45473 size-medium" src="https://example.com/wp- 
content/uploads/2021/11/sample-image-name.jpg" alt="first-name-last-name" width="200" 
height="200" /></a>
<h3>First Last Name</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut 
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat 
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
mollit anim id est laborum.

&nbsp;

Answer 1

从您的代码中，我猜您使用的是 wordpress。

因此，您很可能可以使用引导类来实现您想要实现的目标。

我会推荐你​​看看Bootstrap 4 Media lists

至于示例代码，使用纯 css 和 html，你想做什么检查一下：

.block-container {
  float: left;
  width: 100%;
}

.image-container {
  float: left;
  width: 200px;
  margin: 10px;
}

.text-container {
  float: left;
  width: auto;
  max-width: 300px;
}

<!-- BLOCK START -->
<div class="block-container">
  <div class="image-container">
    <a href="https://example.com/wp-content/uploads/2021/11/sample-image-name.jpg"><img class="alignleft wp-image-45473 size-medium" src="https://via.placeholder.com/200" alt="first-name-last-name" width="200" height="200" /></a>
  </div>
  <div class="text-container">
    <h3>First Last Name</h3>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis aute irure dolor in reprehenderit in voluptate velit
    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>
<!-- BLOCK END -->
<!-- BLOCK START -->
<div class="block-container">
  <div class="image-container">
    <a href="https://example.com/wp-content/uploads/2021/11/sample-image-name.jpg"><img class="alignleft wp-image-45473 size-medium" src="https://via.placeholder.com/200" alt="first-name-last-name" width="200" height="200" /></a>
  </div>
  <div class="text-container">
    <h3>First Last Name</h3>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis aute irure dolor in reprehenderit in voluptate velit
    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>
<!-- BLOCK END -->
<!-- BLOCK START -->
<div class="block-container">
  <div class="image-container">
    <a href="https://example.com/wp-content/uploads/2021/11/sample-image-name.jpg"><img class="alignleft wp-image-45473 size-medium" src="https://via.placeholder.com/200" alt="first-name-last-name" width="200" height="200" /></a>
  </div>
  <div class="text-container">
    <h3>First Last Name</h3>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis aute irure dolor in reprehenderit in voluptate velit
    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>
<!-- BLOCK END -->
<!-- BLOCK START -->
<div class="block-container">
  <div class="image-container">
    <a href="https://example.com/wp-content/uploads/2021/11/sample-image-name.jpg"><img class="alignleft wp-image-45473 size-medium" src="https://via.placeholder.com/200" alt="first-name-last-name" width="200" height="200" /></a>
  </div>
  <div class="text-container">
    <h3>First Last Name</h3>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis aute irure dolor in reprehenderit in voluptate velit
    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>
<!-- BLOCK END -->
<!-- BLOCK START -->
<div class="block-container">
  <div class="image-container">
    <a href="https://example.com/wp-content/uploads/2021/11/sample-image-name.jpg"><img class="alignleft wp-image-45473 size-medium" src="https://via.placeholder.com/200" alt="first-name-last-name" width="200" height="200" /></a>
  </div>
  <div class="text-container">
    <h3>First Last Name</h3>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Duis aute irure dolor in reprehenderit in voluptate velit
    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>
<!-- BLOCK END -->