如何用css实现文字三面环绕图片？

文字长度不确定，图片大小确定（文字面积＞图片面积）
只使用css，如何让文字三面环绕图片？如图——

我最初的想法是将文字上下用两个p分开，然后分别设置:after属性来空出相应的位置，这样上下拼接就会给出一个刚好等于一个图片的空缺，然后给图片绝对定位到空缺位置上

但之后发现一个问题，我不能确定P的大小，所以:after不能定位。。。。
想请教大家有什么常规的办法，奇巧淫技也可以

---

直接對著圖片設置 float 就可以了

img {
  float: right;
  padding: 20px 0 20px 20px;
}

這樣你把圖片插入在哪行，它就會以那行為基準貼齊右側

因為圖片較大，點進去看比較正確
Codepen

---

float就是用来实现文字环绕的

---

demo

没什么技巧，float就可以

---

html部分：

<div class="wrap-div-topSpacer"></div>
                <div class="wrap-div"> DIV with content or Image in the Middle of the text </div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam rhoncus nibh ipsum, nec tincidunt mauris suscipit non. Nullam euismod est in dui vehicula ornare quis non nulla. Sed ultricies eros justo, et tempor ligula viverra vel. Pellentesque semper mattis mattis. Morbi ac fringilla purus, in ullamcorper lacus. Duis eget molestie turpis, nec lobortis enim. Vestibulum iaculis non odio id venenatis. Nulla malesuada orci sed arcu ultrices pulvinar. Fusce orci nisl, aliquam eu blandit non, ornare eu urna. In hac habitasse platea dictumst. Quisque auctor dignissim elit, id condimentum odio vehicula eu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin dui quam, lobortis nec sapien eget, facilisis blandit sapien. Integer ornare felis eget orci consectetur vulputate. Ut efficitur fermentum lacus sed vulputate. </p>
                <div class="wrap-div-topSpacer"></div>
                <div class="wrap-div wrap-div-right"> DIV with content or Image in the Middle of the text </div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam rhoncus nibh ipsum, nec tincidunt mauris suscipit non. Nullam euismod est in dui vehicula ornare quis non nulla. Sed ultricies eros justo, et tempor ligula viverra vel. Pellentesque semper mattis mattis. Morbi ac fringilla purus, in ullamcorper lacus. Duis eget molestie turpis, nec lobortis enim. Vestibulum iaculis non odio id venenatis. Nulla malesuada orci sed arcu ultrices pulvinar. Fusce orci nisl, aliquam eu blandit non, ornare eu urna. In hac habitasse platea dictumst. Quisque auctor dignissim elit, id condimentum odio vehicula eu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin dui quam, lobortis nec sapien eget, facilisis blandit sapien. Integer ornare felis eget orci consectetur vulputate. Ut efficitur fermentum lacus sed vulputate. </p>

css部分：

div.wrap-div-topSpacer {
    width: 0px;
    height: 60px;
    float: left;
}
div.wrap-div {
    float: left;
    clear: both;
    margin: 0px 10px 0 0;
    height: 80px;
    width: 25%;
    text-align: center;
    background: #0088cc;
    color: #FFF;
}
div.wrap-div-right {
    float: right;
    width: 50%;
}