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

<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"也没有用,前端苦手

阅读 5.2k
2 个回答

请问是不是需要这种效果?(对不住有密集恐惧症的孩纸了)
图片描述
代码如下:

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

直接给你贴代码了哈~

        .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%;
        }
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题