css如何正确使用float让文字自动环绕图片

Question

<div class="body-text">
    <div class="img-left">
        <img src="img/enya.jpg" alt="pic" width="164">
    </div>
    <div class="word"> 
        <p>LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOONG TEXT</p>
    </div>
</div>

以下是CSS：

.body-text {
    word-wrap: break-word;
}

.img-left {
    width: 164px;
}

.img-left img {
    margin: 0 20px 20px 0;
    float: left;
}

.word {
    width: 100%;
    text-align: left;

}

显示效果是这样的：

我希望从图片的右边开始环绕
如果是短文本就会从右边开始：

该怎么做呢？Stackoverflow上的几个方法好像都没用，我用了第三方的materializecss，但是用内置的class="left"也没有用，前端苦手

Answer 1

请问是不是需要这种效果？（对不住有密集恐惧症的孩纸了）

代码如下：

<div style="border: 3px solid #005588;padding: 10px;">
    <img src="1.png" style="float: left;"/>
        爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢爱拼才会赢
    <div style="clear:both;"></div>
</div>

Answer 2

直接给你贴代码了哈~

        .body-text {
            width:300px;
            border:1px solid green; /*为了看出效果*/
            word-wrap: break-word;
        }
        /*清除浮动*/
        .body-text:after{
            clear: both;
            content: '';
            display: block;
        }

        .img-left {
            float:left;
            width:50%; 
        }

        .img-left img {
           width:100px;
        }

        .word {
            margin-left:50%;
        }