css如何正确使用float让文字自动环绕图片 -问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

2016-06-22 16:46:19 1858 1
<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;

}

显示效果是这样的:
screenshot
该怎么做呢?Stackoverflow上的几个方法好像都没用,我用了第三方的materializecss,但是用内置的class="left"也没有用,前端苦手

取消 提交回答
全部回答(1)
  • 杨冬芳
    2019-07-17 19:45:46

    screenshot
    代码如下:

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

1

回答

css图标怎么和文字排齐

2018-05-10 20:05:57 1194浏览量 回答数 1

1

回答

JS/CSS 点击式导航栏下拉菜单

2020-02-13 15:59:48 504浏览量 回答数 1

1

回答

JS/CSS 下拉菜单可进行搜索/过滤操作

2020-02-13 15:48:50 489浏览量 回答数 1

1

回答

PHPWind论坛改HTTPS后,JS与CSS文件都还是使用HTTP调用,请问如何修改?

2020-01-06 14:34:52 1358浏览量 回答数 1

1

回答

如何避免使用JS而仅使用CSS?

2020-01-04 11:43:10 625浏览量 回答数 1

1

回答

程序员表白神器:如何使用js+css实现炫美表白页面

2019-12-25 10:14:27 1296浏览量 回答数 1

1

回答

业界常用的优化 WEB 页面加载速度的方法(可以分别从页面元素展现,请求连接,css,js,服务器等

2019-12-16 21:33:06 1273浏览量 回答数 1

1

回答

css和js怎么设置

2018-05-10 20:05:45 1297浏览量 回答数 1

1

回答

html+js+css是什么

2018-05-10 20:06:26 1361浏览量 回答数 1

3

回答

js中css(display:none)和remove在实际使用时的不同?

2016-06-01 18:14:18 3127浏览量 回答数 3
+关注
杨冬芳
IT从业
1
文章
9167
问答
问答排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载