CSS如何实现三边包围图片

代码如下

//css部分
    #content{
        width:400px;
        clear:both;
    }
    #content p{
        text-indent:2em;    
    }
    #content  img{
        width:100px;
        float:right;
        clear: both;    
    }
//页面部分
<div id="content">
<img src="22.jpg">
<p>前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前</p><p>端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端</p>

</div>

我用了float:right，只能实现图片出现在右上角，
请问大神们，在不使用js的情况下，纯CSS
如何实现效果的图片在两个段落各占一半？

---

https://jsfiddle.net/2dx304ju/

HTML，img 放对位置就行了

<div id="content">
  <p>前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前<img src="22.jpg">端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前</p>
  <p>端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端</p>
</div>

CSS

#content {
  width: 400px;
  clear: both;
}
#content p {
  text-indent: 2em;
}
#content img {
  float: right;
  width: 100px;
  margin: 10px 0;
  vertical-align: top;
}

---

img作为内容和文字放一起，设置浮动，文字会自动围绕图片，然后具体调样式，记住，inline/inline-block的dom都会和所在行文字对齐的特点。