在html和css中围绕图像包装文本

我有以下资料： 我试图让文本环绕地球，因此每行距离它大约20px，如下所示：

我不知道怎么做，我意识到我很可能需要一张圆形的图片，如果需要的话我会处理好的

你需要外形：圆形

参考：

@进口urlhttp://fonts.googleapis.com/css?family=Open+Sans； 圆形示例{ 字体系列：开放式Sans，无衬线； 保证金：2rem； } 圆形示例p{ 线高：1.8； } 圆形状示例。曲线{ 宽度：33%；高度：自动； 最小宽度：150px； 浮动：左； 右边距：2em； 边界半径：50%； -webkit外部形状：圆形； 外形：圆形； } 猕猴桃 这是猕猴桃：最初被称为“羊桃”、“木偶果”或中国猕猴桃。这种水果是从中国进口的模糊品种，在二战期间驻新西兰的美国军人中很受欢迎，战争结束后开始向美国出口。在加利福尼亚州，这种水果被重新命名为“奇异果”，因为它与新西兰的国鸟相似。然而，它不是“猕猴桃”，这也是新西兰土著人的人名。说“我要吃一只猕猴桃”意味着你不是食人族就是打算吃一只濒临灭绝的不会飞的鸟。

---

这就是你想做的吗？

<div class="section">
                <img src="images/globe.png" class="leftimage">
                <div class="smtitle righttext">Title</div>
                <p class="righttext">
                        <!--This is just lorem ipsum no need to scroll-->Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis tincidunt leo. Maecenas malesuada tincidunt arcu, vel tristique quam tincidunt sit amet. Ut nisl risus, fermentum at metus a, sodales porta dolor. Curabitur posuere ligula a lacus iaculis, vel lacinia metus porttitor. Nunc iaculis, ipsum quis tristique semper, tortor tellus lobortis dui, id hendrerit nisi enim sit amet libero. Morbi vehicula porta lectus a varius. Pellentesque vestibulum fermentum turpis et ullamcorper. Curabitur venenatis lacus nec bibendum malesuada. Phasellus mollis in turpis vel tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget luctus nisi. Nulla odio quam, hendrerit vitae cursus vitae, gravida at sapien. Aenean ullamcorper elit ligula, id molestie metus bibendum non.
                </p>
</div>

.section{
    width:100%;
    margin:0;
    padding:0;
    display:inline-block;
    margin-bottom:30px;
}
.righttext{
    padding:0 15px;
    float:right;
    text-align:left;
    width:70%;
}
.rightimage{
    float:right;
    width:30%;
}
.leftimage{
    float:left;
    width:30%;
}
.lefttext{
    padding:0 15px;
    float:left;
    text-align:right;
    width:70%;
}