图像和文本元素的间距
Spacing For Image and Text Elements
我正在尝试创建单独的图像和文本部分。
当图文部分包含很多内容时，内容永远不会放在图片下面。内容始终位于其内容区域内。
*这是我一直遇到的问题....文本一直环绕在图像下方，并且每个图像和文本部分之间的间距不均匀。
下面是我一直在修改的示例代码，但到目前为止我还没有得到我上面解释的结果，在下面的图像示例中。
我有 tried/added 以下 CSS 单独添加到段落标记，但仍然无法正常工作。
溢出：隐藏；
显示：块；
我没有要分享的 URL/page，因为我是在本地创建此页面。
非常感谢任何帮助！
<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.
根据你的代码，我猜到你使用的是wordpress。
因此，很可能您可以使用 bootstrap 类 来实现您想要实现的目标。
我会推荐你，看看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 -->
我正在尝试创建单独的图像和文本部分。
当图文部分包含很多内容时，内容永远不会放在图片下面。内容始终位于其内容区域内。
*这是我一直遇到的问题....文本一直环绕在图像下方，并且每个图像和文本部分之间的间距不均匀。
下面是我一直在修改的示例代码，但到目前为止我还没有得到我上面解释的结果，在下面的图像示例中。
我有 tried/added 以下 CSS 单独添加到段落标记，但仍然无法正常工作。 溢出：隐藏； 显示：块；
我没有要分享的 URL/page，因为我是在本地创建此页面。
非常感谢任何帮助！
<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.
根据你的代码，我猜到你使用的是wordpress。
因此，很可能您可以使用 bootstrap 类 来实现您想要实现的目标。
我会推荐你，看看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 -->