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>

有文字包装图像

1 个答案: