请问为什么把img变为行内元素不能起到文字环绕效果呢

请问为什么把img变为行内元素不能起到文字环绕效果呢

为什么用img,p{display:inline}没有效果呢?行内元素是一行显示吗?

正在回答

登陆购买课程后可参与讨论,去登陆

2回答

同学你好, 

  1.  首先你的这句理解是对的, 内联元素的内容会水平排列知道排列不下会自动换行。

  2. 然后, 我们再举个例子,帮助同学理解为什么不可以通过设置display:inline;实现文字环绕的效果。 示例:

    http://img1.sycdn.imooc.com//climg/5d2a8fb700016daa17770496.jpg

    效果图如下所示。

    (1)从效果图可以看出来, 设置为内联元素后, 图片和文字确实在一排排列了, 文字也由于水平排列不下自动换行了。

    (2)但是不会出现文字环绕的效果,因为此时可以将图片理解为文字(inline),p标签里的文字是挨着图片往后排列的。所以p标签的内容超出后不会环绕图片显示,而是在下一行显示了

    http://img1.sycdn.imooc.com//climg/5d2a8fd800017d5219180196.jpg

  3. 最后, 可以参考“小慕”老师讲解的文字环绕原理, 可以知道, 只有浮动才能实现文字环绕哦

同学可以试着理解一下哦

如果帮助到了你, 欢迎采纳!

祝学习愉快~~~



  • 10hours 提问者 #1
    了解了 谢谢!
    2019-07-14 23:48:38
卡布琦诺 2019-07-12 14:52:38

首先,需要了解文字环绕的原理:

带有浮动属性的元素具有包裹性,所有带有浮动属性的元素兼并了块元素和内联元素的优点,使得元素不仅可以设置宽度和高度,也可以在水平方向进行排列布局。

带有浮动属性的元素会脱离标准流进行排列布局,脱离标准流后的元素就不和块元素相处在同一个流布居中,使得带有浮动属性的元素漂浮在正常块元素上面。但是浮动的块虽然脱离了正常的文档流,但是依然占据正常文档流的文本空间。于是在其后面写的文本并不会被浮动元素所覆盖而是继续水平排列超出换行。

标准流中块元素每个各占一行,内联元素则是水平排列,直到一行排列不下进行换行操作,因为使用了float的元素占据文本空间,使得后面的文本以除了浮动元素之外的空间为排列基准,形成了文本环绕的效果

总结:只有浮动才能实现文字环绕,display:inline不能实现文字环绕,只能让元素再一行显示

希望可以帮到你!


  • 提问者 10hours #1
    嗯。。inline不就是把块元素变为内联元素 水平排列直到排列不下自动换行吗?
    2019-07-13 22:31:26
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师