如何在一行内容下方浮动右图

时间:2018-09-02 04:04:00

标签: css css3 css-float

这是我的内容 My content

图像创意如何在1行以下浮动正确的内容 My content 2

这是我的代码

<div class="single-content">
   <div class="floating-image-right">
       <img src="https://dl2.macupdate.com/images/icons256/30017.png" />
   </div>
   <div class="entry_content">
<strong>CleanMyMac</strong> makes space for the things you love. Sporting a range of ingenious new features, CleanMyMac lets you safely and intelligently scan and clean your entire system, delete large, unused files, reduce the size of your iPhoto library, uninstall unneeded apps or fix the ones that started to work improperly, manage all your extensions from one place and do much more – all from one newly designed and beautifully simple interface.
   </div>
</div>

<style>
.floating-image-right {
    float: right;
    max-width: 128px;
}
</style>

1 个答案:

答案 0 :(得分:0)

您必须非常明确地放置floating-image-right标签的位置。

https://jsfiddle.net/fgpLs4u5/2/

body {
  max-width:800px;
  margin: 0 auto;
}
span.img-demo {
  background: red;
  display: block;
  width: 300px;
  height: 150px;
  float: right;
  margin: 7px 0 10px 10px;
  padding: 0;
}
<p class="content">
 This is some content here. This is some content here. This is some content here. This is some content here. <span class="img-demo"></span> This is some content here. This is some content here. This is some content here. This is some content here. This is some content here. This is some content here. This is some content here. This is some content here. This is some content here. This is some content here. This is some content here. This is some content here. This is some content here. This is some content here. This is some content here. This is some content here. This is some content here. This is some content here. This is some content here. This is some content here. 
</p>