CSS如何实现三边包围图片

方法一： 可以区分为：上、中、下，三个模块。 上：正常文字展示。 中：图片和文字区域，用行内元素就好。也可以使用css将块级变成行内。 下：正常文字展示。

方法二： 使用grid，display: grid; grid，是网格布局，grid是一个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
如何实现效果的图片在两个段落各占一半？