html - 有文字环绕图像

Question

我有一篇 WordPress 帖子，用于显示缩略图和博客文本。返回的博客文本带有一堆 <p>标签。 HTML 如下所示:

<div class="post-thumbnail" style="size:100px;">
   <a href="#">
   <img width="300" height="180" src="https://www.google.com/logos/doodles/2018/tom-longboats-131st-birthday-5532989583785984-s.png" class="attachment-medium size-medium wp-post-image" alt="" srcset="https://www.google.com/logos/doodles/2018/tom-longboats-131st-birthday-5532989583785984-s.png 300w, https://www.google.com/logos/doodles/2018/tom-longboats-131st-birthday-5532989583785984-s.png 1024w" sizes="100vw">                   </a>
</div>
<!-- .post-thumbnail -->
<p>
</p>
<p>Welcome to WordPress. This is your first post. Edit or delete it, then start writing! The definitions can be applied to DIVs or OLs. Using Modernizer JS, you can prepend flex-capable browsers with the flexbox code + an element reset, and non-capable browsers with an ugly but functional solution using classic CSS.</p>
<p>Technically, you could also do it with a few lines of jQuery and a denounced resize function. It would be easier for you to set up, but harder on the browser.</p>
<p>Or you could use a combination of the three.</p>
<p>Or you could generate your widths as fluid percentages and control the display using media queries on font sizes, with covered backgrounds on image DIVs.The definitions can be applied to DIVs or OLs. Using Modernizer JS, you can prepend flex-capable browsers with the flexbox code + an element reset, and non-capable browsers with an ugly but functional solution using classic CSS.</p>
<p>Technically, you could also do it with a few lines of jQuery and a denounced resize function. It would be easier for you to set up, but harder on the browser.</p>
<p>Or you could use a combination of the three.</p>
<p>Or you could generate your widths as fluid percentages and control the display using media queries on font sizes, with covered backgrounds on image DIVs.</p>
<p></p>

我想让文字包裹图像。图像应右对齐。这是sample我已经能够创建它，但我不知道如何用我的 HTML 来做到这一点。

Answer 1

如果您已经成功完成了该示例，则相同的 CSS 可以为您的 HTML 完成这项工作:

<style>
img {
    float: right;
}
</style>

但是，由于在 HTML 中图像位于 div 内，因此最好将 CSS 应用于 div。像这样的东西:

<style>
.post-thumbnail {
    float: right;
}
</style>

如果您不想将其应用到类中，可以向 div 添加 ID。这是一个演示:

<style>
.post-thumbnail {
    float: right;
}
</style>
<div class="post-thumbnail" style="size:100px;">
  <a href="#">
    <img width="300" height="180" src="https://www.google.com/logos/doodles/2018/tom-longboats-131st-birthday-5532989583785984-s.png" class="attachment-medium size-medium wp-post-image" alt="" srcset="https://www.google.com/logos/doodles/2018/tom-longboats-131st-birthday-5532989583785984-s.png 300w, https://www.google.com/logos/doodles/2018/tom-longboats-131st-birthday-5532989583785984-s.png 1024w"
      sizes="100vw"> </a>
</div>
<!-- .post-thumbnail -->
<p>
</p>
<p>Welcome to WordPress. This is your first post. Edit or delete it, then start writing! The definitions can be applied to DIVs or OLs. Using Modernizer JS, you can prepend flex-capable browsers with the flexbox code + an element reset, and non-capable browsers
  with an ugly but functional solution using classic CSS.</p>
<p>Technically, you could also do it with a few lines of jQuery and a denounced resize function. It would be easier for you to set up, but harder on the browser.</p>
<p>Or you could use a combination of the three.</p>
<p>Or you could generate your widths as fluid percentages and control the display using media queries on font sizes, with covered backgrounds on image DIVs.The definitions can be applied to DIVs or OLs. Using Modernizer JS, you can prepend flex-capable browsers
  with the flexbox code + an element reset, and non-capable browsers with an ugly but functional solution using classic CSS.</p>
<p>Technically, you could also do it with a few lines of jQuery and a denounced resize function. It would be easier for you to set up, but harder on the browser.</p>
<p>Or you could use a combination of the three.</p>
<p>Or you could generate your widths as fluid percentages and control the display using media queries on font sizes, with covered backgrounds on image DIVs.</p>
<p></p>