代码之家 › 专栏 › 技术社区 › codeNinja

有文字换行图像

css html

codeNinja · 技术社区 · 7 年前

我有一篇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实现这一点。

1 回复 | 直到 7 年前

Racil Hilan 7 年前

如果您已经成功地完成了这个示例,那么同样的CSS也可以为您的HTML完成这项工作:

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

但是,由于在HTML中,图像位于 div ,最好将CSS应用到 部门 .比如:

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

如果不想将其应用于类,可以向 部门 .以下是一个演示:

<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>